jQuery autocomplete doesn't work properly - php

Question

I have this problem with the jQuery autocomplete.
I use JSON data, retrieved from a mySQL db, by PHP function.
$.ajax({
dataType: 'json',
async: false,
method: 'post',
success: function(data) {
test = data;
},
url: '<?php echo site_url('products/autocomplete/'); ?>'
});
So, my JSON data is stored into the variable: 'test'.
This is my autocomplete code:
$( "#prodname" ).autocomplete({
minLenght: 2,
source: test,
focus: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
return false;
},
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.prodname + "</a>" )
.appendTo( ul );
};
The data loads properly and all, but the autocomplete field doesn't seem to work properly. The first item of my JSON object starts with 'b', so only when I press the letter 'b', the autocomplete(suggestions) appear.
How can I fix this? My guess is maybe because I use async: false, but that the only way I made it work a little at first place.
I need the autocomplete on my Product field, so when a user selects product, a hidden field (prodname_fk) receives the corresponding ID of the product. And the uname field (unit of measure) is only used for displaying purposes.
I attach picture for your reference.
Thank you in advance.

Answer 1

If your php page returns json, you can put its url directly in the autocomplete function :
<script>
$(function() {
$( "#birds" ).autocomplete({
source: '<?php echo site_url('products/autocomplete/'); ?>',
minLength: 2,
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
}
});
});
</script>
In your script, you can remove the _renderitem replacement, as it's only useful if you want specific rendering, like
'<em>' + item.prodname + '</em>(' + item.id ')'
You should try to adapt the basic samples from http://jqueryui.com/demos/autocomplete/#remote then add more advanced functionality.

Answer 2

This is how I made it work.
$( "#prodname" ).autocomplete({
minLenght: 2,
source: "<?php echo site_url('products/autocomplete/'); ?>",
select: function( event, ui ) {
$( "#prodname" ).val( ui.item.prodname );
$( "#code" ).val( ui.item.code );
$( "#uname" ).val( ui.item.uname );
$( "input[name=prodname_fk]" ).val( ui.item.id );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.prodname + "</a>" )
.appendTo( ul );
};
Now, I use asynchronous search, so whenever the user types something in the Products field, a GET request is sent, with the term (http://localhost/ci/products/autocomplete?term=xxx), which is searched against the product names into the database, returning the matching results(JSON) into the autocomplete suggestion box.