HTML datalist: Is there a way to autocomplete based character order?

Question

If I enter "I" in the box, I get India, United States, United Kingdom and Israel. REASON: All have an "i" in them...somewhere. This seems silly, to me any way. My thinking is it should only display India and Israel. They have "i" in the first letter. Is there a trick to get this to happen? To get the suggested items to take note of the order of the letters?

    <!DOCTYPE html>
    <html>
    <head>
    </script>
    </head>
    <body>
    <input type="text" list="countries" name="mycountry" />
    <datalist id="countries">
        <option value="India">India</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Germany">Germany</option>
        <option value="France">France</option>
        <option value="Israel">Israel</option>
    </datalist>
    </body>
    </html>

score 2 · Answer 1 · answered Nov 07 '16 at 14:42

As per my understanding you can't do that with pure HTML. However with the help of JavaScript you can achieve it.

var initialArray = [];
        initialArray = $('#countries option');
        $("#countryInput").keyup(function() {
          var inputVal = $('#countryInput').val();
          var first = [];
          first = $('#countries option');
          if (inputVal != '' && inputVal != 'undefined') {
            var options = '';
            for (var i = 0; i < first.length; i++) {
              if (first[i].value.toLowerCase().startsWith(inputVal.toLowerCase())) {
                options += '<option value="' + first[i].value + '" />';
              }
            }
            document.getElementById('countries').innerHTML = options;
          } else {
            var options = '';
            for (var i = 0; i < initialArray.length; i++) {
              options += '<option value="' + initialArray[i].value + '" />';
            }
            document.getElementById('countries').innerHTML = options;
          }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="countries" name="mycountry" id="countryInput" />
<datalist id="countries">
  <option value="India">India</option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Germany">Germany</option>
  <option value="France">France</option>
  <option value="Israel">Israel</option>
</datalist>

JSFiddle Link

Excellent JS solution. Thank You. Would I be nuts to suggest that's how HTML5 should have implemented datalist? It gets worse when I type "IN" Hey must be India...nope UK is included bcos it too has an N. Oh well. It is how it is. Thanks again for reply. — Milton Valler, Nov 08 '16 at 17:27

score 0 · Answer 2 · answered Nov 07 '16 at 03:57

From what I see, browsers (that support this) do substring matches. In fact, Chrome used to only match at front, but was updated to match in the middle (https://bugs.chromium.org/p/chromium/issues/detail?id=153991). I would say you need to skip datalist and use a custom JS-based approach instead.

HTML datalist: Is there a way to autocomplete based character order?

2 Answers2

Linked