Question

我创建了数据列表。数据列表上没有错误。它工作正常，但是当我在输入中输入内容时，我希望它选择最接近的值。例如，

<input type="text" list="ilceList" id="standardInput"">
<datalist id="ilceList">
    <option>Adalar</option>
    <option>Bahçelievler</option>
    <option>Bakırköy</option>
    <option>Beşiktaş</option>
    <option>Kadıköy</option>
</datalist>

这是我的数据列表。输入b时，将依次显示bahcelievler bakirkoy和besiktas。我想按Enter键选择第一个值

我该怎么做？

Answer 1

这是我的解决方案。您可以参考。希望对您有帮助，我的朋友：））

$(function() {
       $('input').keyup(function(event) {
       if(event.keyCode == 13){
            event.preventDefault();
            if($(this).val() != ''){
                filter(this); 
                }           
            }    
        });

       function filter(element) {
            var value = $(element).val();
            $("#ilceList > option").each(function () {
                let option = $(this).text();
                if (option.toLowerCase().indexOf(value.toLowerCase()) > -1) {            
                    $('#standardInput').val(option);
                    return false;
                } 
            });
        };
    });

http://jsfiddle.net/bLx9n7fg/

输入键的数据列表

1 个答案: