防止过滤 <input type="search"> 标记中的自动完成建议

Question

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

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

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

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

<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

Answer 1

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

一旦您从数据列表中获得过滤后的值， 用正则表达式检查它们。

示例：

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

希望这会有所帮助。 :)