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

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

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

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

谢谢你的帮助。

你考虑过吗？并且仍然使用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"]
});
});

$（文档）.ready（函数（）{
$（“输入#搜索”）。自动完成({
资料来源：[“苹果”、“香蕉”、“橘子”]
});
});