带回车键的数据列表

Question

我创建了数据列表。 datalist 上没有错误。它运行良好，但是当在输入中输入某些内容时，我希望它选择最接近的值。例如，

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

带回车键的数据列表

Datalist wiht enter key

html

jquery

datalist