Filter Jquery AutoComplete by multiple values of an array of objects

问题

I want to set up autocomplete plugin for selecting only the valid employees in the list. I have an array of Employee objects, having EmployeeID and EmployeeName. Currently I have loaded the autocomplete for the EmployeeName by copying all the Employee's EmployeeName in an array and feeding it to setup the autocomplete plugin.

var employeeNames = new Array();
for (var i = 0 ; i < employees.length ; i++)
{
    employeeNames[a] = employees.Employee[a].Name;
}
$("#txtEmployeeName").autocomplete(employeeNames, {
    multiple: true,
    mustMatch: true,
    autoFill: true
});

It will do the work, but WHAT I WANT IS, that if the user wants to enter EmployeeID in this textbox, it loads the suggestion filtering on EmployeeID too, although it will show the EmployeeNames in the suggestions. Is there any way I could implement that, I remember I saw it somewhere but dont recall the website.

回答1:

jQueryUI requires a value and/or label field if you are using an object:

Multiple types supported:

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.

Source: http://api.jqueryui.com/autocomplete/#option-source

With that in mind you have to adopt your data, to include the value property, which you just assign to the name (e.g. $.each(employees, function(){ this.value = this.name }); ...)

Now the other thing you have to define, is how you want to filter. This can be done by defining the source.

Example:

    $("#txtEmployeeName").autocomplete({
        source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

            var matching = $.grep(employees, function (value) {
                var name = value.value;
                var id = value.id;

                return matcher.test(name) || matcher.test(id);
            });
            response(matching);
        }
    });

Fiddler example: http://fiddle.jshell.net/YJkTr/

Full code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


    <script>
        $(function () {
            var employees = [
                { "value": "Tom", "id": "1" },
                { "value": "Stefan", "id": "2" },
                { "value": "Martin", "id": "3" },
                { "value": "Sara", "id": "4" },
                { "value": "Valarie", "id": "5" },
            ]

            $("#txtEmployeeName").autocomplete({
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

                    var matching = $.grep(employees, function (value) {
                        var name = value.value;
                        var id = value.id;

                        return matcher.test(name) || matcher.test(id);
                    });
                    response(matching);
                }
            });
        });
    </script>
</head>
<body style="font-size: 62.5%;">
    <div class="ui-widget">
        <form>
            <label for="txtEmployeeName">Developer:</label>
            <input id="txtEmployeeName" />
        </form>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/15267912/filter-jquery-autocomplete-by-multiple-values-of-an-array-of-objects

标签

jquery

jquery-ui

autocomplete

jquery-autocomplete