Filter Jquery AutoComplete by multiple values of an array of objects

Question

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.

Coanda · Accepted Answer · 2013-03-20 04:28:24Z

9

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>

edited Mar 20, 2013 at 4:28

Coanda

3935 silver badges12 bronze badges

answered Mar 7, 2013 at 10:39

Stefan

15k17 gold badges92 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stefan Over a year ago

Thank you, I changed the title so it can be found more easily

Taha Rehman Siddiqui Over a year ago

I have another question Stefan, how to rebind autocomplete on select event. Like I would like to remove that item from suggestions i just selected. How do I do that?

Stefan Over a year ago

Great, I didn#t see your comment.

Jerome2606 Over a year ago

Hello Stefan, how to achieve this with jquery mobile ? I didn't find again a solution to make the same work.

Noah Passalacqua Over a year ago

is there a way to not use the value key as whats being returned? I am using Parse.com objects and would like to return a field of the object via object.get('value')

|

Collectives™ on Stack Overflow

Filter Jquery AutoComplete by multiple values of an array of objects

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related