Changing HTML datalist autocomplete behavior

问题

I'm trying to implement a search autocomplete feature for a website I am working on. I am using HTML datalist, with the options generated dynamically from a backend MySQL database (communicating with AJAX). However, the datalist autocomplete isn't working like I want it to. The autocomplete seems to automatically ignore results if the keywords are not in order.

For example, if I wanted to search for the string "apple banana orange", and typed in "apple orange" in the search box, the string would not show up, even though it is one of the options generated by my backend.

I'm assuming that this is some kind of inherent datalist functionality. I was wondering if there was any way around this, or if anyone had some alternative ideas on how to implement a search autocompletion feature that will overcome this problem?

Thanks for any help.

回答1:

Have you considered jQuery autocomplete? and still using Ajax to dynamically generate the values.

<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

来源：https://stackoverflow.com/questions/15210753/changing-html-datalist-autocomplete-behavior