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, the database code does not work.
If possible, please explain why my database code 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() {
$('#citiesInput').typeahead({
name: "suggestion typeahead",
local: ["italy", "malaysia", "new york", "USA", "England"]
});
});
</script>
<input type="text" class="q typeahead" dir="auto" 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() {
$('#citiesInput').typeahead({
name: "suggestion typeahead",
remote: "/suggestion.php?q=%QUERY"
});
});
</script>
<input type="text" class="q typeahead" dir="auto" 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>";
}
}
}
?>
I can see 2 things wrong.
1) You need to specify the remote url (the documentation says it is required) UPDATE Seems that you can just set remote to the url. But I do see that they use single-quotes, where you are using double-quotes. Don't know if that matters.
2) Your php class needs to return valid JSON. You are returning html.
Database
Suggestion.php
NOTE
I see that your suggestions.php file was returning the title and it's link with the html. Typeahead is supposed to return a list of strings. Once the user selects one of the suggested words, then you should lookup the link for that word.