javascript - HTML5 Datalist auto suggest 显示以搜索关键字开头的列表

Question

我在我的项目中使用 HTML5 数据列表进行自动建议。默认情况下，HTML5 遵循关键字包含方法而不是开始于 appoarch。或者如果我有一个数据列表的示例一、二、三意味着如果我在搜索框中键入 o，它会同时显示一和二。但我期望的是在自动建议列表中只显示一个。请大家帮我解决这个问题。

<input list="sampleList" >

<datalist id="sampleList">
   <option value="one">
   <option value="two">
   <option value="three">
</datalist>

Answer 1

可能与:HTML datalist: Is there a way to autocomplete based character order? 重复。

Buddhi Madarasinghe 的 JSFiddle Link 来自上述网站。

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

您可以借助 JavaScript 实现它。

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

您甚至可以针对不同的搜索查询修改代码: JSFiddle Link