Question

我在我的项目中使用HTML5 Datalist进行自我提示。默认HTML5遵循关键字包含方法，而不是以 appoarch开头。例如，如果我有一个数据列表一，二，三意味着如果我在搜索框中键入o，它显示一个和两个。但我期待的是在自动提示列表中只显示一个。请求帮助我如何实现这一点。

＆＃13;

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

＆＃13;

Answer 1

只有javascript（可能是jQuery autosuggest）作为默认建议取决于浏览器对datalist标记的实现。而且非常糟糕。但是，只要我记得，IE只比较第一个字母

Answer 2

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

JSFiddle Link 作者：Buddhi Madarasinghe，来自上面的网站。

    <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

HTML5 Datalist auto建议显示以search关键字开头的列表

2 个答案: