jquery - 通过对象数组的多个值过滤 Jquery AutoComplete-6ren

jquery - 通过对象数组的多个值过滤 Jquery AutoComplete

转载作者：行者123 更新时间：2023-12-01 00:48:24

24

4

我想设置自动完成插件以仅选择列表中的有效员工。我有一个 Employee 对象数组，其中包含 EmployeeID 和 EmployeeName。目前，我已经通过将所有 Employee 的 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。有什么方法可以实现这一点，我记得我在某个地方看到过它，但不记得那个网站了。

最佳答案

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

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.

来源: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);
        }
    });

Fiddler 示例: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>

关于jquery - 通过对象数组的多个值过滤 Jquery AutoComplete，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15267912/

24

4

0

文章推荐： regex - 如何在 dirsync python 模块中包含选项？

文章推荐： json - 在 SAS 中导入单行 json 文件

文章推荐： python - 哪个更快？设置比较还是计数器比较？为什么

c++ int 数组，值为 2 维 int 数组(3d 数组)
我正在尝试创建一个包含 int[][] 项的数组即 int version0Indexes[][4] = { {1,2,3,4}, {5,6,7,8} }; int version1Indexes[
Java 数组[i]++ 与++数组[i]
我有一个整数数组: private int array[]; 如果我还有一个名为 add 的方法，那么以下有什么区别: public void add(int value) { array[va
JavaScript 数组 + 数组 = 字符串？
当您尝试在 JavaScript 中将一个数组添加到另一个数组时，它会将其转换为一个字符串。通常，当以另一种语言执行此操作时，列表会合并。 JavaScript [1, 2] + [3, 4] = "
数组
根据我正在阅读的教程，如果您想创建一个包含 5 列和 3 行的表格来表示这样的数据... 45 4 34 99 56 3 23 99 43 2 1 1 0 43 67 ...它说你可以使用下
数组
我通常使用 python 编写脚本/程序，但最近开始使用 JavaScript 进行编程，并且在使用数组时遇到了一些问题。在 python 中，当我创建一个数组并使用 for x in y 时，我得
数组 toString() 中的 javascript 数组
我有一个这样的数组: temp = [ 'data1', ['data1_a','data1_b'], ['data2_a','data2_b','data2_c'] ]; // 我想使用 toStr
php - 如何将秒表结果(数组)推送到第一个表结果(数组)
rent_property (table name) id fullName propertyName 1 A House Name1 2 B
C++ 数组 [索引] 与索引 [数组]
这个问题在这里已经有了答案: 关闭13年前。 Possible Duplicate: In C arrays why is this true? a[5] == 5[a] array[index] 和
excel - 将用户名(数组)与电子邮件(数组)匹配
使用 Excel 2013。经过多年的寻找和适应，我的第一篇文章。我正在尝试将当前 App 用户(即“John Smith”)与他的电子邮件地址“jsmith@work.com”进行匹配。使用两个
r - 3D 数组 -> 应用 -> 3D 数组
当仅在一个边距上操作时，apply 似乎不会重新组装 3D 数组。考虑: arr 1)，但对我来说仍然很奇怪，如果一个函数返回一个具有尺寸的对象，那么它们基本上会被忽略。最佳答案这是一个不太理
javascript - php 数组(数组)到 javascript
我有一个包含 GPS 坐标的 MySQL 数据库。这是我检索坐标的部分 PHP 代码； $sql = "SELECT lat, lon FROM gps_data"; $stmt=$db->query
python - 查找最后一个非零元素 3D 数组 - numpy 数组
我需要找到一种方法来执行这个操作，我有一个形状数组 [批量大小, 150, 1] 代表 batch_size 整数序列，每个序列有 150 个元素长，但在每个序列中都有很多添加的零，以使所有序列具有相
android - 如何在json中访问对象>数组>对象>数组>对象？
我必须通过 url 中的 json 获取文本。层次结构如下: 对象>数组>对象>数组>对象。我想用这段代码获取文本。但是我收到错误 :org.json.JSONException: No valu
cocoa - NSMutable NSArray 数组 - 如何避免所有这些行并使用维度或 3D 数组？
enter code here- (void)viewDidLoad { NSMutableArray *imageViewArray= [[NSMutableArray alloc] init];
java - 流式传输 2d 数组、修剪值并收集回 2d 数组
知道如何对二维字符串数组执行修剪操作，例如使用 Java 流 API 进行 3x3 并将其收集回相同维度的 3x3 数组？重点是避免使用显式的 for 循环。当前的解决方案只是简单地执行一个 fo
使用嵌套循环的 Java Union 数组 2 int 数组
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
Jquery 与 JSON 数组 - 转换为 Javascript 数组
我有来自 ASP.NET Web 服务的以下 XML 输出: 1710 1711 1712 1713
javascript - 更新嵌套数组和对象中的对象。对象-->数组-->对象-->数组--> "object"
如果我有一个对象todo作为您状态的一部分，并且该对象包含数组列表，则列表内部有对象，在这些对象内部还有另一个数组listItems。如何更新数组 listItems 中 id 为“poi098”的对
c# - 如何在一个字节中转换 bool 数组，然后再转换回 bool 数组
我想将最大长度为 8 的 bool 数组打包成一个字节，通过网络发送它，然后将其解压回 bool 数组。已经在这里尝试了一些解决方案，但没有用。我正在使用单声道。我制作了 BitArray，然后尝试
c# - 将 char 数组/字符串转换为 bool 数组
我们的数据库中有这个字段指示一周中的每一天的真/假标志，如下所示:'1111110' 我需要将此值转换为 boolean 数组。为此，我编写了以下代码: char[] freqs = weekday

首页

博学

6Ren·AI

商城

jquery - 通过对象数组的多个值过滤 Jquery AutoComplete