jQuery autocomplete doesn't work properly

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.

---

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.

---

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.