通过对象数组的多个值过滤 Jquery AutoComplete答案

【问题标题】：Filter Jquery AutoComplete by multiple values of an array of objects通过对象数组的多个值过滤 Jquery AutoComplete
【发布时间】：2013-03-20 12:28:24
【问题描述】：

我想设置自动完成插件以仅选择列表中的有效员工。我有一个 Employee 对象数组，有 EmployeeID 和 EmployeeName。目前，我已经通过将所有员工的 EmployeeName 复制到一个数组中并将其提供给设置自动完成插件来加载 EmployeeName 的自动完成功能。

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
});

它会完成这项工作，但我想要的是，如果用户想在此文本框中输入 EmployeeID，它也会在 EmployeeID 上加载建议过滤，尽管它会在建议中显示 EmployeeNames。有什么办法可以实现，我记得我在某个地方看到过，但不记得网站了。

【问题讨论】：

标签： jquery jquery-ui autocomplete jquery-autocomplete

【解决方案1】：

如果你使用一个对象，jQueryUI 需要一个值和/或标签字段：

支持多种类型：

数组：数组可用于本地数据。支持的格式有两种：字符串数组：[ "Choice1", "Choice2" ]

具有标签和值属性的对象数组： [ { label: "Choice1", value: "value1" }, ... ] 显示标签属性在建议菜单中。该值将被插入到输入中用户选择项目时的元素。如果只有一个属性指定，它将用于两者，例如，如果您只提供值属性，该值也将用作标签。

来源：http://api.jqueryui.com/autocomplete/#option-source

考虑到这一点，您必须采用您的数据，以包含您只需分配给名称的 value 属性（例如 $.each(employees, function(){ this.value = this.name }); ...）

现在您必须定义的另一件事是您要如何过滤。这可以通过定义来源来完成。

例子：

    $("#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);
        }
    });

提琴手示例：http://fiddle.jshell.net/YJkTr/

完整代码：

<!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>

【讨论】：

谢谢，我改了标题，这样更容易找到
我还有一个问题 Stefan，如何在选择事件上重新绑定自动完成功能。就像我想从我刚刚选择的建议中删除该项目一样。我该怎么做？
太好了，我没有看到你的评论。
您好 Stefan，如何使用 jquery mobile 实现这一点？我没有再次找到使相同工作的解决方案。
有没有办法不使用value 键作为返回的内容？我正在使用 Parse.com 对象，并希望通过 object.get('value') 返回该对象的一个字段