jQuery自动完成返回整个数组而不是搜索值答案

【问题标题】：jQuery autocomplete returns whole array instead of searched valuejQuery自动完成返回整个数组而不是搜索值
【发布时间】：2019-03-25 07:42:06
【问题描述】：

下面的自动完成函数从关联的 $filteredUsersArray 返回所有用户，而不是我在 html 输入标记中键入的内容。我只需要得到我正在寻找的用户。根据我在输入中输入的内容，函数（请求）正在正确执行。该代码适用于标准的非关联数组。我正在传递带有用户 ID 的关联数组，然后使用该 ID 发布私人消息。

自动完成功能：

$userSearchbox.autocomplete({
    source: function(request, response) {

        response($.map($filteredUsersArray, function (value, key) {
            return {
                label: value.username,
                value: key.id
            }
        }));
    }
});

$filteredUsersArray：

    [{
    "id": "1",
    "userName": "maciek"
}, {
    "id": "2",
    "userName": "stefan"
}, {
    "id": "3",
    "userName": "newuser"
}, {
    "id": "8",
    "userName": "papaitalia"
}, {
    "id": "9",
    "userName": "nowy_user"
}, {
    "id": "12",
    "userName": "zenek"
}]

页面上的自动完成结果：

【问题讨论】：

Javascript 没有关联数组，只有索引数组。

标签： javascript jquery json frontend jquery-ui-autocomplete

【解决方案1】：

您使用$.map 函数并不是解决此问题的最佳方法。这是因为映射的概念是以一对一的方式将旧项目映射到新项目。如果你开始的数组有 25 个项目，并且你映射它，你会得到一个也是 25 个项目的新数组。

您要做的是过滤您的数据！

在原生 Javascript 领域，有一个方便的 .filter() 函数，您可以在任何数组上调用。但在 jQuery Land 中，该函数称为 $.grep(array, function); 第一个参数是您要过滤的原始数组。第二个参数是一个函数，它非常重要。

您传递给$.grep 调用的函数是一个测试，它将为原始数组中的每个项目调用一次。如果测试返回 true，则将被测试的项目添加到新数组中。如果测试返回 false，则该项目不会添加到新数组中。整个$.grep 函数的结果是一个新数组，其中仅包含通过测试的项目。过滤数组！！！ :D

您没有包含足够的代码让我创建一个完美的复制+粘贴解决方案，但这里有一个非常小而简单的演示。仔细检查它，并尽力将这些概念应用到您自己的代码中。祝你好运！！

JS Fiddle (with comments & console logs)

JS Fiddle (no comments)

Read about $.grep() at jQuery Docs

【讨论】：