JQuery UI auto-completion issues

Question

I am trying to use the new autocomplete function in the jQuery user interface, but I am having some problems.

I can get data from the database (I see it in FireBug), but I can not display the drop-down list (or warn the data).

This is my jQuery code:

jQuery('#brand_search').autocomplete({ source: "http://mysite.com/wp-content/themes/storelocator/include/jquery.search.php?instance=brand", minLength: 2, delay: 50, select: function(e, ui) { alert(ui); } }); 

And this is my PHP code:

 /* ------------------ Brand Autosuggest ------------------------- */ function autosuggestBrand($dal) { $result = $dal->getRowBySearch('sl_label','name', $this->term); $brands = array(); if(mysql_num_rows($result)>0) { while($row = mysql_fetch_assoc($result)) { array_push($brands, array( "id" => $row['id'], "name" => html_entity_decode($row['name'], ENT_QUOTES, 'UTF-8') ) ); } } echo json_encode($brands); } 

I see these two guides:
http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget

But still cannot figure out how to display / warn the extracted data.

This is the result of echo json_encode

 [ {"id":"4642","name":"Mo Koshji"}, {"id":"4627","name":"MO-A"}, {"id":"4626","name":"MO'CYCLE"}, {"id":"4628","name":"mo851"}, {"id":"4629","name":"Mob Action"} ] 

Answer 1

adjust your php array as follows to get the correct json output for jquery-autocomplete:

 array_push ( $brands, array ( "label" => $row['id'], "value" => html_entity_decode($row['name'], ENT_QUOTES, 'UTF-8') ) ); ); 

since jquery autocomplete for autocomplete requires json property names to run autocomplete as described in the documentation:

Local data can be simple arrays of strings or contains objects for each element of the array, either label or value, or both. The label property is displayed in the offers menu.

http://jqueryui.com/demos/autocomplete/#custom-data

Answer 2

change your code to this (remove it from the click event handler):

 jQuery(function() { jQuery('#brand_search').autocomplete({ source: "http://mysite.com/wp-content/themes/storelocator/include/jquery.search.php?instance=brand", minLength: 2, delay: 50, select: function(e, ui) { alert(ui); } }); });