Menu
I am using twitter typeahead and php as backend for getting data from mysql.But i am not able to see any suggestions when i start typing on the text box. i think because the php output has to be JSON encoded..
how can i encode the output
output:
echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n";
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Typeahead</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'countries',
prefetch: 'getvalues.php',
limit: 10
});
});
</script>
<style type="text/css">
.bs-example{
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
</head>
<body>
<div class="bs-example">
<input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
</div>
</body>
</html>
getvalues.php
<?php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = "select file_name,img_url,captions from completer";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
$fname = $rs['file_name'];
$iurl = $rs ['img_url'];
$caption = $rs ['captions'];
echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n";
}
?>
559
First of all, to encode the output as JSON, you have to build an array with the results and use json_encode(), like so:
$return = array();
while($rs = mysql_fetch_array($rsd)) {
$result[] = "...";
}
echo json_encode($result);
But by default results are html escaped before shown in typeahead, so you wan't get the result you expect, but see the HTML codes in the suggestion list. To design entries with custom HTML you should use Templates as described here.
Your $result array entries could look like this to provide the fields you have in your html:
$result[] = array(
"iurl" => "...",
"fname" => "...",
"caption" => "..."
);
... and then be filled in the template as described.
Another thing: The prefetch option, you are using isn't one of typeahead, but of bloodhound, which is usually used together with typeahead, but needs to be initialized first and is given to typeahead as the source. Have a look here, it's quite easy.
Bloodhound on it's part can take fixed datasets as arrays (via the local option), fixed datasets via URL (via the prefetch option) or can do queries to URLs, which is what you apperently want to do, as you fetch the value of $_GET["q"] in your PHP code. In that case you'd have to use $q in your SQL and initialize bloodhound with the remote option like this:
remote: {
url: 'getvalues.php?q=%QUERY',
wildcard: '%QUERY'
}
You don't need to do that, as it will be filtered again on the client side by typeahead.js ... it's just a question of performance and the amount of results. If there are just a few, use bloodhounds prefetch option.
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
