i using twitter typeahead , php backend getting data mysql.but not able see suggestions when start typing on text box. think because php output has json encoded..
how can encode 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 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"; } ?>
first of all, encode output json, have build array results , use json_encode(), so:
$return = array(); while($rs = mysql_fetch_array($rsd)) { $result[] = "..."; } echo json_encode($result); but default results html escaped before shown in typeahead, wan't result expect, see html codes in suggestion list. design entries custom html should use templates described here.
your $result array entries provide fields have in html:
$result[] = array( "iurl" => "...", "fname" => "...", "caption" => "..." ); ... , filled in template described.
another thing: prefetch option, using isn't 1 of typeahead, of bloodhound, used typeahead, needs initialized first , given typeahead source. have here, it's quite easy.
bloodhound on it's part can take fixed datasets arrays (via local option), fixed datasets via url (via prefetch option) or can queries urls, apperently want do, fetch value of $_get["q"] in php code. in case you'd have use $q in sql , initialize bloodhound remote option this:
remote: { url: 'getvalues.php?q=%query', wildcard: '%query' } you don't need that, filtered again on client side typeahead.js ... it's question of performance , amount of results. if there few, use bloodhounds prefetch option.
Comments
Post a Comment