How to get php output in typeahead?

I use twitter typeahead and php as a backend to get data from mysql. But I can’t see any suggestions when I start typing in a text box. I think because php output must be JSON encoded ..

how can i encode the output

exit:

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"; } ?> 
+8
jquery php mysql
source share
3 answers

First of all, to encode the output as JSON, you need to build an array with the results and use json_encode() , for example:

 $return = array(); while($rs = mysql_fetch_array($rsd)) { $result[] = "..."; } echo json_encode($result); 

But by default, html results are escaped before being displayed in typeahead, so you won’t get the expected result, but look at the HTML codes in the list of suggestions. To create posts using custom HTML, you must use Templates, as described here .

Your $result array entries may look like to provide the fields you have in html:

 $result[] = array( "iurl" => "...", "fname" => "...", "caption" => "..." ); 

... and then populated in the template as described.

Other: the prefetch option that you use is not a type, but a bloodhound, which is usually used with typeahead, but you must first initialize and assign typeahead as source . Look here , it's pretty simple.

The bloodhound on this part can accept fixed datasets in the form of arrays (via the local option), fixed datasets via URL (using the prefetch option) or can make requests to URLs that you, how you get the value $_GET["q"] in your PHP code. In this case, you will have to use $q in your SQL and initialize the snoop using the remote option as follows:

 remote: { url: 'getvalues.php?q=%QUERY', wildcard: '%QUERY' } 

You do not need to do this, as it will be filtered again on the client side by type-head.js ... it's just a matter of performance and the number of results. If there are only a few, use the prefetch search option.

+1
source share

you can put your list for typeahead in a json file and change your script to this:

 $(document).ready(function(){ $('input.typeahead').typeahead({ name: 'countries', prefetch: 'location/getvalues.json', limit: 10 }); }); 

The json file should be:

 ["country1","country2","country3"] 
0
source share

First of all, you should use mysqli instead of mysql , and also you are not using your $_GET in your query. Not sure if this is necessary.

For your code, you don’t know how to use prefetching. I myself use the bloodhound, which is also used on the official gigabyte twitter. It looks like this:

 var countries= new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), queryTokenizer: Bloodhound.tokenizers.whitespace, limit: 100, remote: { 'cache': false, url: 'ajax/getvalues.php?q=%QUERY', wildcard: '%QUERY', filter: function (data) { return data; } } }); countries.initialize(); 

This will allow you to receive data from your server through an ajax call. You return JSON without any html markup from your ajax call to your type. Html markup can be done in style

 $('.typeahead').typeahead({ highlight: true }, { name: 'countries', source: producten.ttAdapter(), displayKey: 'artikelNaam', templates: { suggestion: function (countries) { result='<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;">'+ '<img src='+countries.img_url+' class="icons" />' '<div class="results" style="color:#696969;text-decoration:none;">'+ countries.file_name+ '</div>'+ '<span style="color:#696969;text-decoration:none;" class="author">'+ countries.captions+ '</span>'+ '</a>'; return result; } } }); 

And your php file should look like this:

 <?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); //should change to mysqli_query($con,$sql) where $con is your connection in config.php while($rs = mysqli_fetch_assoc($rsd)) { $rows[]=$rs; } print json_encode($rows); ?> 
0
source share

All Articles