JQuery Autocomplete (Remote) - example

Question

I really hoped to avoid posting a new question, but I can't find an example of how the jQuery Autocomplete Remote function works, which includes both the calling page and the search page. The jQueryUI Demo and Documentation section does not contain the source "search.php"

I tried dozens of combinations, but here is what I started with:

<style> .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } </style> <script> $(function() { function log( message ) { $( "<div/>" ).text( message ).prependTo( "#log" ); $( "#log" ).attr( "scrollTop", 0 ); } $( "#birds" ).autocomplete({ source: "search.php", minLength: 1, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } }); }); </script> <div class="demo"> <div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds" /> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> </div> 

and search.php:

  $conn = mysql_connect("localhost", "USERNAME", "PASSWORD"); mysql_select_db("DATABASE", $conn); $q = strtolower($_GET["birds"]); $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'"); while ($row = mysql_fetch_array($query)) { echo json_encode($row); } 

Does anyone have code snippets that show both sides of this equation that they can share? Thanks so much for any help you can provide.

Answer 1

Here is the correct code for search.php:

  $conn = mysql_connect("localhost", "USERNAME", "PASSWORD"); mysql_select_db("DATABASE", $conn); $q = strtolower($_GET["term"]); $return = array(); $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'"); while ($row = mysql_fetch_array($query)) { array_push($return,array('label'=>$row['FIELD'],'value'=>$row['FIELD'])); } echo(json_encode($return)); 

Some key points

• The word term is nowhere to be found on the sample invocation page specified by jqueryui, but it is the name of the name Querystring
• You must create an array of values ​​and then json code before returning

I hope this helps some people in the future!

Answer 2

There are several larger tutorials when you google for the "jQuery UI Autocomplete Tutorial", I suggest this might help: http://www.google.com/search?q=jqueryUI+autocomplete+tutorial

Answer 3

Here is the adjusted autocomplete version that I used earlier. I may have an error or two since I cut the code.

On server:

  if(isset($_POST['queryString'])) { $queryString = $_POST['queryString']; $html = ''; if(strlen($queryString) >1) { $names= explode(" ", $queryString ); foreach ($names as &$value) { // step 1: first names $result= queryf("SELECT *, MATCH(productName, productTags, productCategory, productOneLine) AGAINST ('*$queryString*' IN BOOLEAN MODE) AS score FROM products WHERE MATCH(productName, productTags, productCategory, productOneLine) AGAINST ('*$queryString*' IN BOOLEAN MODE) AND productStatus='1' ORDER BY score DESC LIMIT 10") ; if($result) { while ($row = mysql_fetch_array($result)) { echo '<li onclick="location.href=\'/'.$row['productCategory'].'/'.$row['productSlug'].'/\';" style="cursor: pointer;"><a href="/'.$row['productCategory'].'/'.$row['productSlug'].'/"> <div class="resultImg"><img src="/image.php?width=24&height=24&image='.$row['productIcon'].'" /></div> <span class="productName">'.$row['productName'].'</span><br /> '.$row['productOneLine'].'</a></li>'; } } } else { echo ' <ul> <li> <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> <span class="productName">Processing...</span><br /> Please keep typing while we process your code</li> </ul>'; } } } else { echo ' <ul> <li> <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> <span class="productName">Processing...</span><br /> Please keep typing while we process your code</li> </ul>'; } } else { echo 'Nothing to see here.'; } 

script:

 function suggest(inputString){ if(inputString.length == 0) { $('#suggestions').fadeOut(); } else { $('#country').addClass('load'); $.post("/autosuggest.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').fadeIn(); $('#suggestionsList').html(data); $('#country').removeClass('load'); } }); } } function fill(thisValue) { $('#country').val(thisValue); setTimeout("$('#suggestions').fadeOut();", 600); } 

And on the XHTML page:

 <div id="bg_searchMain"> <form id="form" action="#"> <input type="text" style="float:left; display:inline; width:430px; margin:5px 0 0 5px; background:none; border:none;" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" autocomplete="off" /> <!--<img src="images/button_search.gif" alt="Find" id="button_search" />--> <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="suggestionList" id="suggestionsList"> &nbsp; </div> </div> </form> </div> 

Comments on “acceptability” are not needed, so it’s more useful to post this to Google than to reputation.

Answer 4

I made php like, and it was successful, I used the mysqli method.

  $q = strtolower($_GET["term"]); $return = array(); $query = "select name from students where name like '%$q%'"; $result=$conn->query($query); while ($cresult=$result->fetch_row()){array_push($return,array('label'=>$cresult[0],'value'=>$cresult[0])); } echo(json_encode($return)); 

? >