html - 更改 HTML 数据列表自动完成行为

Question

我正在尝试为我正在开发的网站实现搜索自动完成功能。我正在使用 HTML datalist，选项从后端 MySQL 数据库动态生成（与 AJAX 通信）。但是，datalist 自动完成功能并没有像我想要的那样工作。如果关键字不按顺序排列，自动完成似乎会自动忽略结果。

例如，如果我想搜索字符串“苹果香蕉橙”，并在搜索框中输入“苹果橙”，则该字符串不会显示，即使它是我的后端生成的选项之一。

我假设这是某种固有的数据列表功能。我想知道是否有任何方法可以解决这个问题，或者是否有人对如何实现可以克服这个问题的搜索自动完成功能有一些替代想法？

谢谢你的帮助。

Answer 1

您是否考虑过jQuery 自动完成功能？并且仍然使用 Ajax 来动态生成值。

<form id="searchbox">
<input id="search" type="text" placeholder="Type here" class='search_input' >
</form>

$(document).ready(function() {
$("input#search").autocomplete({
source: ["apple","banana", "orange"]
});
});

JSFiddle