下面的自动完成功能从关联的 $filteredUsersArray 返回所有用户,而不是我在 html 输入标签中键入的内容。我只需要得到我正在寻找的用户。根据我在输入中键入的内容,函数(请求)正在正确执行。该代码适用于标准的非关联数组。我正在传递带有用户 ID 的关联数组,然后使用该 ID 发布私有(private)消息。
自动完成功能:
$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"
}]
最佳答案
您对 $.map
函数的使用并不是解决此问题的最佳方法。这是因为映射的概念是以 1 对 1 的方式将旧项目映射到新项目。如果你的起始数组有 25 个项目,你映射它,你会得到一个也是 25 个项目的新数组。
您要做的是过滤您的数据!
在 vanilla Javascript 领域,有一个方便的 .filter()
函数,您可以在任何数组上调用它。但在 jQuery 领域,该函数称为 $.grep(array, function);
第一个参数是您要过滤的原始数组。第二个参数是一个函数,它非常重要。
您传递给 $.grep
调用的函数是一个测试,它将为原始数组中的每个项目调用一次。如果测试返回 true,则被测试的项目被添加到新数组中。如果测试返回 false,则该项目不会添加到新数组中。整个 $.grep
函数的结果是一个新数组,其中只包含通过测试的项。过滤阵列!!! :D
您没有包含足够的代码让我创建一个完美的复制+粘贴解决方案,但这里有一个非常小而简单的演示。仔细检查它,并尽力将这些概念应用到您自己的代码中。祝你好运!!
关于javascript - jQuery 自动完成返回整个数组而不是搜索值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52908886/