有没有办法让 HTML5 数据列表使用模糊搜索？

Question

我有一组数据列表选项，我希望在搜索时进行模糊匹配。例如，如果我输入“PHP HTML”或“PHPAndHTML”，我希望它们中的任何一个与“PHP And HTML”选项相匹配。有没有办法做到这一点？请参见此小提琴或下面的代码以获取示例。

<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，而如果我将所有输入绑定到单个数据列表，它实际上非常高效的。

Answer 1

数据列表匹配行为不可自定义。

即使您尝试强制下拉列表可见，它也不会。

$(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>

随意测试上面的代码，当您键入时，根据正则表达式显示/隐藏正确的值。但是数据列表不可见。

另一个答案据说做了类似的事情，但即使是那个答案也不起作用，以证明我的观点。/sf/ask/2981508491/

如果您想拥有可自定义的行为，我建议在此特定用例中使用插件。