forked from evkortright/pagina-de-busqueda
-
Notifications
You must be signed in to change notification settings - Fork 0
/
busqueda.html
96 lines (89 loc) · 4.49 KB
/
busqueda.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title>Blogs de ingenieros de Elastic</title>
<meta charset="UTF-8">
<meta name="description" content="Sample search page">
<meta name="keywords" content="HTML, CSS, JavaScript, Bootstrap, search, Elasticsearch">
<meta name="author" content="Enrique V. Kortright">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
</head>
<body>
<div class="jumbotron text-center bg-cover"
style="background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.9) 100%), url(elastic.jpg)"
>
<h1>Blogs de ingenieros de Elastic</h1>
<p><em class="text-muted">La mejor información sobre el increíble Elastic Stack a su alcance ...</em></p>
</div>
<div class='container'>
<form>
Términos:<br />
<input type="text" name="keyword" id='keyword' onkeyup="callREST()" />
</form>
<div class='container-fluid' id="response"></div>
</container>
<script>
function resultsToHTML(results) {
var n = results.hits.total.value;
var html = '<br/><p class="text-info"><em>' + results.hits.total.value +
((n==1)? ' resultado':' resultados') + ' en ' + results.took + 'ms</em></br>';
var A = [1, 2, 3];
for (a of A) {
console.log(a);
}
for (result of results.hits.hits) {
html = html +
'<div class="card" style="width:400px">' +
'<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2NQarv8HwAExAJ7a5i8agAAAABJRU5ErkJggg==" alt="Blue dot" />' +
'<div class="card-body">' +
'<p class="card-text">' +
result._source.publish_date +
'</p>' +
'<h4 class="card-title">' +
((result.highlight && result.highlight.title)? result.highlight.title : result._source.title) +
'</h4>' +
'<p class="card-text">' +
result._source.author +
'</p>' +
'<blockquote class="text-muted">' +
((result.highlight && result.highlight.content)? result.highlight.content.toString().substring(0, 150) : result._source.content.toString().substring(0, 150)) +
'...' +
' <em class="text-info">Score: ' + result._score +
'</em></blockquote>' +
'<a href="https://www.elastic.co' +
result._source.url +
'" class="btn btn-primary" target="_top">Leer</a>' +
'</div>' +
'</div>'
}
return html;
}
function callREST() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var results = JSON.parse(this.responseText);
var html = resultsToHTML(results);
document.getElementById("response").innerHTML = html;
}
};
xhttp.open("POST", "https://3c2a3d8073164d74ab41fe9ba6083490.us-central1.gcp.cloud.es.io:9243/blogs/_search/template", true);
xhttp.setRequestHeader("Authorization", "Basic " + btoa("elastic:5I0PA70Bqym93se9er6J7zCW"));
xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhttp.send(JSON.stringify(
{
"id": "busqueda_blogs",
"params": {
"terminos": document.getElementById("keyword").value
}
}
))
}
</script>
</body>
</html>