我有一组数据列表选项，我想在搜索时进行模糊匹配。例如，如果我输入“PHP HTML”或“PHPAndHTML”，我希望其中任何一个与“PHP And HTML”选项匹配。有什么办法可以做到这一点吗？请参见这把小提琴 https://jsfiddle.net/92jntaxg/或以下代码为例。
<h1>Datalist Demo</h1>
<label for="default">Pick a programming language</label>
<input type="text" id="default" list="languages">
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby And Go">
<option value="PHP And HTML">
<option value="Go">
<option value="Erlang">
<option value="Python And C++">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
我想使用本机数据列表而不是自定义库来完成此操作。原因是，在我的现实场景中，我的页面上有数百个输入，它们都使用相同的数据列表，并且使用自定义库，它变得非常 CPU 密集型，而如果我将所有输入绑定到单个数据列表，它实际上非常密集高效的。
数据列表匹配行为不可自定义。
即使您尝试强制下拉列表可见，它也不会。
$(document).on('keyup', '#default', function() {
let val = this.value.split(/[\s]+|(?=[A-Z][a-z])|(?<=[a-z])(?=[A-Z])/),
reg = '';
val.forEach(function(entry) {
if (entry != '')
reg += '.*' + entry + '.*'
});
var datalist = $('#languages option');
$.each(datalist, function(i) {
var option = datalist[i].value;
if (!option.match(reg)) {
$(datalist[i]).hide()
} else {
$(datalist[i]).show()
$('#languages').show()
console.log(datalist[i].value)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<h1>Datalist Demo</h1>
<label for="default">Pick a programming language</label>
<input type="text" id="default" list="languages">
<datalist id="languages" open="open">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby And Go">
<option value="PHP And HTML">
<option value="Go">
<option value="Erlang">
<option value="Python And C++">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
请随意测试上面的代码，当您键入时，会根据正则表达式显示/隐藏正确的值。但数据列表不可见。
另一个答案据说做了类似的事情，但即使这个答案也不起作用，以证明我的观点。https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only https://stackoverflow.com/a/42593258/9942418
如果您想拥有可定制的行为，我建议您在这个特定的用例中依赖插件。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
