I am trying to implement the devBridge autocomplete but it doesnt work with ajax. It works when I use a manual json object without the php but I need to get the data from database. PHP CODE:
<?php
require_once "medoo.php";
$database = new medoo([
'database_type' => 'mysql',
'database_name' => 'elektriksikayet',
'server' => 'localhost',
'username' => 'root',
'password' => '',
'charset' => 'utf8',
'port' => '3307'
]);
$return_arr = [];
$keyword = $_POST['keyword'];
$companies = $database->select('companies','company_name');
foreach ($companies as $comp){
$row_array['label'] = $comp;
array_push($return_arr, $row_array);
}
echo json_encode($return_arr);
?>
HTML CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<script src="js/jquery-autocomplete.js"></script>
<script src="js/companyAutoComplete.js"></script>
</head>
<body>
<input type="text" id="autocomplete"/>
</body>
</html>
JS CODE
$(document).ready(function () {
$("#autocomplete").autocomplete({
serviceUrl:'AutoComplete.php', //tell the script where to send requests
//callback just to show it's working
onSelect: function(value){ alert('You selected: ' + value); }
});
});
Your response should be valid JSON and following format:
{
suggestions: [
{ "value": "United Arab Emirates", "data": "AE" },
{ "value": "United Kingdom", "data": "UK" },
{ "value": "United States", "data": "US" }
]
}
It does not seem that what you are returning has this structure.
For other persons who has the same problem: You should manage the response like this way:
$("#autocomplete").autocomplete({
serviceUrl:'AutoComplete.php'
transformResult: function (response) {
return {
suggestions: $.map(response, function(dataItem) {
return { value: dataItem.name, data: dataItem };
})
};
},
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.