Question

如果我进入＆＃34;我＆＃34;在盒子里，我得到了印度，美国，英国和以色列。原因：所有人都有一个＆＃34;我＆＃34;在他们......某个地方。对我来说，这似乎很愚蠢。我的想法是它应该只显示印度和以色列。他们有＆＃34;我＆＃34;在第一个字母。是否有诀窍才能实现这一目标？要获得建议的项目，请注意字母的顺序？

    <!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>

Answer 1

从我看到的，浏览器（支持这个）做子串匹配。事实上，Chrome过去只在前面匹配，但已更新为匹配中间（https://bugs.chromium.org/p/chromium/issues/detail?id=153991）。我想说你需要跳过datalist并使用基于JS的自定义方法。

Answer 2

根据我的理解，您无法使用纯HTML执行此操作。但是，借助JavaScript，您可以实现它。

＆＃13;

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;
          }
        });

＆＃13;

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

＆＃13;

JSFiddle Link

HTML datalist：有没有办法自动完成基于字符顺序？

2 个答案: