Jquery UI Autocomplete: search from multiple attributes of one array

Question

Hi I'm trying to get the jQuery UI autocomplete widget to work so that it searches for matches from multiple attributes of my array (not just one that it does by default).

I've messed around with their example, however I'm still unsure how to solve this.

http://jsfiddle.net/FUZPN/

Here's my array format in script

var projects = [
    {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        other: "9834275 9847598023 753425828975340 82974598823"
    },
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        other: "98 83475 9358 949078 8 40287089754 345 2345"
    },
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        other: "49857 2389442 573489057 89024375 928037890"
    }

What I'm seeking is that if you type "write", the first element should pop up in autocomplete, similarly if you type "jq" the first 2 elements should pop up.

---

According to the documentation:

Array: An array can be used for local data. There are two supported formats:

• An array of strings: [ "Choice1", "Choice2" ]

• An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

How do I (hard)code it so the source uses 2 labels (label and desc?) instead of the one label?

---

(Sorry I've searched for many similar questions, however they all aim at multiple sources, which is not here since I only have 1 array .. is it?)

Answer 1

Autocomplete accepts a third type of source, a function, that can provide data any way you see fit:

The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:

• A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
• A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

This means that you can write something like this

$( "#project" ).autocomplete({
    source: function (request, response) {
        // request.term is what you typed
        console.log(request.term); 

        //call response with an array containing the filtered data
        response([...]); 
    }
});

A simple solution to your problem:

function lightwell(request, response) {
    function hasMatch(s) {
        return s.toLowerCase().indexOf(request.term.toLowerCase())!==-1;
    }
    var i, l, obj, matches = [];

    if (request.term==="") {
        response([]);
        return;
    }

    for  (i = 0, l = projects.length; i<l; i++) {
        obj = projects[i];
        if (hasMatch(obj.label) || hasMatch(obj.desc)) {
            matches.push(obj);
        }
    }
    response(matches);
}

$( "#project").autocomplete({
    source: lightwell
});

And a Fiddle http://jsfiddle.net/FUZPN/5/