9

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>

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.

Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
Jake
  • 497
  • 1
  • 6
  • 16
  • What do you actually mean by 'fuzzy search'? A regular expression perhaps? – Poul Bak Jun 28 '20 at 20:43
  • @PoulBak A regex might work, I was hoping for an attribute switch that would make the browser more forgiving of spaces and maybe even spelling mistakes. Like the OP said: 'if I type "PHP HTML" or "PHPAndHTML" I would like either of those to match the "PHP And HTML" option.' Another way to achieve this (like with JS) would be fine too. – user4301448 Jun 30 '20 at 03:44
  • 1
    I would use js; get the the values into js, and use fuse.js to search them. Its search capabilities are excellent – KayakinKoder Jun 30 '20 at 14:39

1 Answers1

8

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.

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.

Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57