jquery-editable-select 可编辑输入的下拉选择框

<select id="editSelect"></select>
    <button class="btn" id="submitBtn">Default </button>
    <script>
        let dataList = [
            'a',
            'ab',
            'b',
            'bc',
            'dd',
            '小米',
            '小猪'
        ];
        $(document).ready(function () {
            let html = "";
            for(let i=0;i<=2;i++){
                html += '<option>'+dataList[i]+'</option>';
            }
            $("#editSelect").html(html);
            $('#editSelect').editableSelect();

            $("#editSelect").bind("input propertychange",function(event){
                let searchList = fuzzyQuery(dataList,$("#editSelect").val())
                let html = '';
                for(let i in searchList){
                    html += '<li class="es-visible">'+searchList[i]+'</li>';
                }
                // $('#editSelect').editableSelect('clear');
                $('#editSelect').parent().find("ul").html(html).show();
            });

            function fuzzyQuery(list, keyWord) {
                var arr = [];
                for (var i = 0; i < list.length; i++) {
                    if (list[i].indexOf(keyWord) >= 0) {
                        arr.push(list[i]);
                    }
                }
                return arr;
            }

            $("#submitBtn").bind("click",function () {
                console.log($("#editSelect").val())
            });
        })
    </script>

扫描小程序二维码方便阅读