Question

我有一个与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()调用会产生看似可靠的结果，但我无法找到任何可以确保其准确的资源 - 同样，根据浏览器的不同，您可能会看到{{{{{ 1}}和显示的实际选项数：

的JavaScript

n_matches

Working demo on JSFiddle.

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

Answer 1

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

因此，不要使用indexOf()，而是将其更改为使用charAt(0)。使用charAt()，我们会将搜索输入的第一个字母与可能选项的第一个字母进行比较。

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

这给你一个准确的＆amp;可靠的计数将显示的选项数量。

这是您更新的fiddle。

我在Chrome＆amp; IE浏览器。你得到相同的结果。

更新 - 发现错误

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

所以我们可以看到最后的结果是不正确的。所以我们想要使用您原来的解决方案＆amp;矿。这将阻止上表中的最终方案。

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

Updated solution

Answer 2

我知道这是一篇老文章，但是，两种解决方案都存在问题。上面的两个解决方案要么仅在部分时间内返回了正确的数字，要么随着选项范围的缩小而一直返回0。对我有用的解决方案实际上是查看是否有任何选项包含搜索条件，因为它会缩小搜索范围。

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

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

2 个答案: