<html lang="en">
<head>
<title> Example of Bootstrap Typeahead with Ajax </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 text-center">
<br/>
<h1> Example of Dynamic Autocomplete search using Bootstrap Typeahead JS</h1>
<input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
</div>
</div>
<script type="text/javascript">
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('/ajaxpro.php', { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);
return process(data);
});
}
});
</script>
</body>
</html>
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "learn");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
$sql = "SELECT items.title FROM items
WHERE title LIKE '%".$_GET['query']."%'
LIMIT 10";
$result = $mysqli->query($sql);
s$json = [];
while($row = $result->fetch_assoc()){
$json[] = $row['title'];
}
echo json_encode($json);