Sorry for any inconvenience to understand my question
How can I make the suggestion list work using typeahead.js and with database as the source?
Before trying the database code, the fixed source code is working. But when I tried the database code, it does not work.
Fixed source code:
<html>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
<script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.q.typeahead').typeahead({
name: "suggestion typeahead",
local: ["italy", "malaysia", "new york", "USA", "England"]
});
});
</script>
<input type="text" class="q typeahead" id="citiesInput" onkeyup="typeahead(this.value)" />
</html>
Database code:
<html>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
<script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.q.typeahead').typeahead({
name: "suggestion typeahead",
remote: '/suggestion.php?q=%QUERY'
});
});
</script>
<input type="text" class="q typeahead" id="citiesInput" onkeyup="typeahead(this.value)" />
</html>
suggestion.php:
<?php
include 'connect.php'; //connect with database
$query = $_GET["q"];
if($query != "")
{
$safequery = mysqli_real_escape_string($con,$query);
$stmt = "SELECT * FROM searchengine WHERE title LIKE '%" . $safequery . "%' OR keywords LIKE '%" . $safequery . "%' OR link LIKE '%" . $safequery . "%' LIMIT 4";
$result = mysqli_query($con,$stmt) or die(mysqli_error($con));
$number_of_result = mysqli_num_rows($result);
if ($number_of_result > 0) {
//results found here and display them
while ($row = mysqli_fetch_assoc($result)) { //show first 10 results
$title = $row["title"];
$link = $row["link"];
echo "<div id='sugg-search-result'>";
echo "<a href='$link' id='sugg-title'>" . $title . "</a>";
echo "</div>";
}
}
}
?>
Thanks in advance.
I think you are supposed to return Json data not html from the server side.
You could also use the filter typeahead option to convert your data to the Datum format the typeahead control requires. See the typeahead documentation for this.