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

Question

我正在尝试为我正在使用的网站实现搜索自动完成功能。我正在使用 HTML 数据列表，其中的选项是从后端 MySQL 数据库动态生成的(与 AJAX 通信)。但是，数据列表自动完成功能并不像我希望的那样工作。如果关键字不按顺序，自动完成似乎会自动忽略结果。

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

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

感谢您的帮助。

Answer 1

你有没有考虑过jQuery autocomplete ？并且仍然使用 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