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

我有一个填充的

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>

---

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

看来您当前的解决方案给出了一些错误的结果。如果键入字母

a

，循环将显示5个结果，但将显示0个选项

indexOf（）

正在计算javascript、java、visual basic、chapel和charm

因此，不要使用

indexOf（）

，而是将其更改为使用

charAt（0）

。使用，我们将比较搜索输入的第一个字母与可能选项的第一个字母

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++;
}

for（变量i=0；i

您建议的方法似乎计算了正确的匹配数。但是，在字段中输入某个内容，然后将其删除后，计数器将显示

0

，下拉列表中仍显示chrome中最后一个非空匹配的结果，并在IE中显示列表中的所有内容。删除该内容，您是否真的碰到了退格？或者使用

x

清除问题？如果我删除了某些内容，则下拉列表根本不会显示。如果我点击

x

，下拉列表将保持不变。但我认为这是

数据列表

更期望的行为。至于IE，它似乎就是IE选择实现它的方式。如果我们删除JavaScript，只使用HTML

datalist

，事情仍然是这样。因此，这不是受我的解决方案或你的解决方案影响的问题。如果你想更改这些浏览器功能，我认为你必须创建一个新问题。无论如何，在有条件执行语句之前应用最小字符数检查似乎能准确地、更重要的是可靠地解决问题。基于开始的子字符串匹配是一个很好的选择，我感谢您的努力。欢迎来到SO。除了分享你的代码，你还应该考虑进一步说明为什么你的解决方案比现有的（和被接受的）一个更好，以及你面对的问题。这可能有助于将来遇到与您相同问题的其他用户。

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