JQuery UI catcomplete not returning selected result - html

Question

I am using JQuery UI remote autocomplete with Categories.
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
cat = currentCategory;
self._renderItem( ul, item );
});
}
});
$(function() {
$( "#birds" ).catcomplete({
delay:0,
source: "/search.html?term="+ $("#birds").val(),
minLength: 2,
select: function( event, ui ){
alert(ui.item.value);
}
});
});
The following is the result I get from the source:
[{"value":"Just a Product","id":"1","category":"Category Name"}]
The problem is that I can't get the alert(ui.item.value) to work and display the selected item.
Any help please?
Thanks.

Answer 1

This is not how you deal with the source.
see this.. http://api.jqueryui.com/autocomplete/#option-source
you can use
array
string
callback function
if you want to receive data from a page in json format, use jquery's $.ajax()
see this for ajax http://api.jquery.com/jQuery.ajax/
you can do something like
$.ajax({url: 'search.php?term='+$("#birds").val(),
dataType: 'json',
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Accept","application/json");
},
async: false,
success: function(data){
bArray=new Array;
bJson=data;
bArray.push(bJson[0].value);
bArray.push(bJson[0].id);
bArray.push(bJson[0].category);// for multiple records put these 3 lines in loop and replace 0 with a counter
}
});
$( "#birds" ).autocomplete({
source: bArray,
select:function(event,ui)
{alert(ui.item.value);}
});
dont forget to declare bArray, bJson
BUT i would still say you are doing it wrong. Instead of using value,id,category together you use use only one of them as autocomplete. can you tell what are you exactly showing in autocomplete