javascript - 防止过滤自动完成建议<input type="search">标签

问题描述

我有一个连接到包含自动完成建议的数据列表的 html 输入字段。

<input type="search" id="input-search" class="form-control" name="searchfield" list="autocompleteitems">

<datalist id="autocompleteitems">
</datalist>

当在搜索栏中按下一个键时，datalist 通过 javascript ajax 调用获取其内容。我的自动完成建议还包含我想要显示的同义词。这会导致以下示例中显示的问题。假设我想搜索“apple”并ap在搜索栏中输入ì。ajax 请求获取一个结果列表并将其放入我的数据列表中，如下所示：

<datalist id="autocompleteitems">
    <option value="apple"></option>
    <option value="fruit"></option>
    <option value="apples"></option>
</datalist>

我想要的是对这三个项目（苹果，水果苹果）的建议。因为fruit不开始ap它会被踢出，只有apple和apples被建议。

有没有办法阻止 html/浏览器过滤那些不是以搜索框中的文本开头的项目？

编辑评论中链接的stackoverflow帖子显示了如何在搜索字段上设置过滤器。但是 Firefox 会自动过滤，我的问题是如何不过滤结果。

例子：

我ap在搜索字段中输入。

我的 ajax 请求返回apple并将fruit其写入数据列表中。

现在 Firefox 建议apple，但fruit因为它没有以ap.

我想要的是这两个词都是建议 -apple和fruit

标签： javascripthtml

Java Script 中的 RegEx 可能会对您有所帮助https://javascript.info/regexp-anchors。你可以在你的 HTML 中有一个 JS 函数。

从数据列表中获取过滤后的值后，使用正则表达式检查它们。

例子：

var filtered_Recs_From_DataList = "Apple";
console.log( /^Apple/.test(filtered_Recs_From_DataList) );

希望这可以帮助。:)

javascript - 防止过滤自动完成建议标签

问题描述

解决方案

推荐阅读