Question

I have this code,

$(function() {
    //var asd = '<?php $regions_list_full; ?>';
    var projects = [
        {
            value: "jquery",
            label: "jQuery",
            desc: "the write less, do more, JavaScript library",
            //icon: "jquery_32x32.png"
        },
        {
            value: "jquery-ui",
            label: "jQuery UI",
            desc: "the official user interface library for jQuery",
            //icon: "jqueryui_32x32.png"
        },
        {
            value: "sizzlejs",
            label: "Sizzle JS",
            desc: "a pure-JavaScript CSS selector engine",
            //icon: "sizzlejs_32x32.png"
        }
    ];


    $( "#find" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#find" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#find" ).val( ui.item.label );
            //$( ".module h1" ).val( ui.item.value );
            $(":header.title").html(ui.item.value);
            //$( "#project-description" ).html( ui.item.desc );
            //$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };
    });

actually this is from the autocomplete of jQueryUI, and I have an array of values which are fetched from the database. What I want is to replace my values into the var projects =[{value:asd}] such that my suggestions of the autocomplete will be the data from the database. How would I do this?

Answer 1

You don’t want to use source: projects you probably want to define a function for the source using an AJAX call like this

$( "#search_address" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: '/path/to/script',
            dataType: 'json',
            data: 'whatever you need here', // i.e. term value
            dataFilter: function (data, type) {
                // do whatever you need to here to change data into proper autocomplete array format
                // if JSON data is already in correct format you can just do this.
                response($parseJSON.(data));
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                // handle error here
            },
            success: function(data) {
                // maybe check for case of empty data object here (i.e. successful URL request, but no data returned)
                return data;
            }
        });
    }
});

Now you typically want to limit the number of results returned by your API (maybe 10 or 20 records at most), as it is likely a bad UI experience to have 1000 items show up in autocomplete. On a good autocomplete the number of results should decrease dramatically after a few letters have been types in. This also make you script perform much better in that you are only processing a handful of returned records. For the same reason, you may also want to use the minLength property of autocomplete to not even bother starting the request until X number of characters are entered.