如何根据输入值可靠地计算数据列表中的匹配数

How do I reliably count the number of matches in a Datalist based on Input value?

本文关键字：列表 数据 计算 何根 输入      更新时间：2023-11-27

我有一个填充的datalist元素与一个input元素关联，以在现代浏览器上启用本机自动补全功能：

HTML代码

<input type="search" id="search" list="autocomplete" />
<datalist id="autocomplete">
    <option value="c++" />
    <option value="javascript" />
    <option value="html" />
    <option value="php" />
</datalist>

使用JavaScript，什么是基于#search输入值计算匹配次数的可靠方法？我之所以这么问，是因为处理自动完成是一项本地浏览器功能，我预计会有多种算法来选择供应商之间的匹配。

我不需要复制或模仿每个浏览器的算法，我只需要找到一种方法来告诉你选择了多少浏览器。

一个简单的indexOf()调用会产生看似可靠的结果，但我找不到任何可以确保其准确性的资源——此外，根据浏览器的不同，您可能会看到n_matches的值与实际显示的选项数之间的差异：

JavaScript

for (var i = 0; i < options.length; i++) {
    if (options[i].value.indexOf(search.value) !== -1)
        n_matches++;
}

JSFiddle上的工作演示。

我知道你们大多数人可能会使用jQuery或其他库来完成这项任务，但我宁愿坚持新发现的本地方法。

您当前的解决方案似乎给了您一些错误的结果。如果键入字母a，循环将显示5个结果，但将显示0个选项。indexOf()正在计算javascript、java、visual basic、chapel和魅力。

因此，与其使用indexOf()，不如将其更改为使用charAt(0)。使用charAt（），我们将比较搜索输入的第一个字母和可能选项的第一个字符。

if (options[i].value.charAt(0) === this.value.charAt(0))

这会给你一个准确的&将显示的选项数的可靠计数。

这是你最新的小提琴。

我在Chrome&IE。你会得到同样的结果。

更新-发现错误

Search     Results    Options
a            0
h            1          html
j            2          javascript, java
javascript   2          javascript

所以我们可以看到最后的结果是不正确的。因此，我们希望使用您的原始解决方案&矿这将防止出现上表中的最终情况。

if (options[i].value.charAt(0) === this.value.charAt(0) && options[i].value.indexOf(this.value) !== -1)

更新的解决方案

我知道这是一篇旧帖子，但我对这两种解决方案都有问题。上面的两个解决方案要么只是部分时间返回了正确的数字，要么在选项缩小时一直返回0。对我有效的解决方案实际上是在缩小结果时查看是否有任何选项包含搜索条件。

for(var i = 0; i < options.length; i++) {
    if (options[i].value.toLowerCase().includes(search.value.toLowerCase()))
        n_matches++;
}
相关文章：