I am trying to make a web app using PHP & AJAX. It should retrieve data from Elasticsearch without refreshing the page(live search). Is it possible to implement such retrieval on elasticsearch index?
For that, I have made these two files:
index2.php
<?php
session_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax-Trials</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<br />
<h2 align="center">Ajax Live Data Search using Jquery, PHP, Elasticsearch</h2><br />
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
<br />
<div id="result"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch2.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
and here is fetch2.php
<?php
session_start();
require_once '../vendor/autoload.php';
use ElasticsearchClientBuilder;
$client = ClientBuilder::create()->setHosts(['127.0.0.1:9200'])->build();
$output = '';
if(isset($_POST["query"]))
{
$search = $_POST["query"];
$query = $client->search([
'body' => [
'query' => [
'bool' => [
'should' => [
'multi_match' => [
"fuzziness" => "AUTO",
'fields' => ['district','countrycode','name','population'],
'query' => $search
]
]
]
],
'from' => 0,
'size' => 100
]
]);
if($query['hits']['total']>=1){
$results = $query['hits']['hits'];
}
}
if(isset($results))
{
$output .= '
<div class="table-responsive">
<table class="table table bordered">
<tr>
<th>ID</th>
<th>Name</th>
<th>CountryCode</th>
<th>District</th>
<th>Population</th>
</tr>
';
foreach($results as $r)
{
$output .= '
<tr>
<td>'.$r['_id'].'</td>
<td>'.$r['_source']['name'].'</td>
<td>'.$r['_source']['countrycode'].'</td>
<td>'.$r['_source']['district'].'</td>
<td>'.$r['_source']['population'].'</td>
</tr>
';
}
echo $output;
}
else
{
echo 'Data Not Found';
}
?>
When I search for any string, It successfully prints the Headers of the table but is not printing a data. What is the issue here?
The JSON format of the index is this:
{
"_index": "cities",
"_type": "city",
"_id": "35",
"_version": 1,
"_score": 0,
"_source": {
"id": 35,
"@timestamp": "2020-03-10T18:24:46.963Z",
"@version": "1",
"population": 2168000,
"district": "Alger",
"countrycode": "DZA",
"name": "Alger"
},
"fields": {
"@timestamp": [
"2020-03-10T18:24:46.963Z"
]
}
}
2
Answers
I just removed the 'population' field from the search fields and it worked. Elasticsearch here could not search numeric input and from a numerical field.
Your JSON format shows the data returned is an object.
To access object values code the following:
As you can see I used -> (Object) instead of [] (array)