Question

I was wondering how to format the source to allow this example :

I want to be able to autocomplete the field either by entering the name, or ref, or address which match a single object

So this is mainly a formatting question

id  1 = { name = "test", ref = "1337", address = "123 street" }
    2 = { name = "john", ref = "2", address = "oxford street" }

Here’s what i’ve done so far, but it’s not working. I know that i’m missing something really obvious.

     var autocompleteFields = new Array();

     for (var i in db._data.installations)
     {
         smallArray = [db._data.installations[i].name, db._data.installations[i].reference, db._data.installations[i].address];
         autocompleteFields.push(smallArray);  
     }

      $("#input_search_installation_autocomplete").autocomplete({
            source: autocompleteFields
      });  

}); 

Thanks.

Answer 1

Maybe it’s not so trivial solution but it works:

var data = [
    { id: 1, name: "test", ref: "1337", address: "123 street" },
    { id: 2, name: "john", ref: "2", address: "oxford street" }
];

$("#input_search_installation_autocomplete").autocomplete({
        minLength: 1,
        //define callback to format results  
        source: function (req, add) {
            add(getSourceData(req));
        },
}).data("autocomplete")._renderItem = (function (ul, item) {

        if (item == undefined) return;

        var label = '<span>' + item.name + " " + item.address + '</span>';

        return $("<li></li>").data("item.autocomplete", item).append(label).appendTo(ul);
});

function getSourceData(req) {
    var source = new Array();
    var query = req.term;

    for(var i = 0; i < data.length; i++) {
        var entry = data[i];            
        if (entry.name.indexOf(query) > -1 || entry.ref.indexOf(query) > -1 || entry.address.indexOf(query) > -1) {
            source.push(entry);
        }
    }
    return source;
}

Code: http://jsfiddle.net/2AUN8/6/

Hope it helps.