有没有一种方法可以使HTML5数据列表使用模糊搜索? [英] Is there a way to make an HTML5 datalist use a fuzzy search?
问题描述
我有一组要在搜索时进行模糊匹配的数据列表选项.例如,如果我输入"PHP HTML",或"PHPAndHTML"我希望这些都与"PHP And HTML"(PHP和HTML)匹配.选项.有什么办法吗?请参见此小提琴或以下代码作为示例.
I have a set of datalist options that I would like to fuzzy match when searching. For instance, if I type "PHP HTML" or "PHPAndHTML" I would like either of those to match the "PHP And HTML" option. Is there any way to do this? Please see this fiddle or the code below for an example.
<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,而如果我将所有输入都绑定到单个数据列表,则实际上
I want to do this with a native datalist instead of a custom library. The reason being is that in my real-world scenario I have hundreds of inputs on my page that all use the same datalist, and with custom libraries it becomes very CPU intensive, whereas if I tie all inputs to a single datalist it is actually very efficient.
推荐答案
数据列表匹配行为不可自定义.
Datalist matching behavior is not customizable.
即使您尝试强制下拉菜单可见,也不会显示.
Even when you try and force the dropdown to be visible, it won't.
$(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>
随时测试上面的代码,键入时,根据正则表达式显示/隐藏正确的值.但是数据列表不可见.
Feel free to test the code above, when you type, the right values are shown/hidden depending on the regex. But the datalist isn't being visible.
据说另一个答案也做了类似的事情,但即使这个答案也不能奏效,以证明我的观点. https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only
Another answer supposedly did something similar, but even that answer doesn't work, to prove my point. https://stackoverflow.com/questions/42592978/how-to-make-datalist-match-result-from-beginning-only
如果您要具有可自定义的行为,我建议在此特定用例中使用插件.
I would suggest relying on plugins for this particular use case if you want to have a customizable behavior.
这篇关于有没有一种方法可以使HTML5数据列表使用模糊搜索?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!