把input实现像select中的功能进行模糊搜索，如果搜索成功，且放在input中？

第一步： 在div中 的inut下面放一个selsect选择器：如下：

                <div class="layui-inline" style="">

                <label class="layui-form-label">管理部门</label>

                <div class="layui-input-block">

                <input class="layui-input select-search-input" placeholder="" autocomplete="off" id="department" name="department"  style="width:18.75rem" onkeyup="FuzzyEnquiry()">

                <!-- <input type="text" name="selectInputUser" id="selectInputUser" class="layui-input select-search-input" value="" onkeyup="search();" autocomplete="off"> -->

                <select name="selectUser" id="selectUser" lay-filter="selectUser" autocomplete="off" class="layui-select" lay-search>

                                                                               

                </select>

                </div>

        </div>

 

 

第二步：在选中的控件上做相应事件：

1.获取当选中后被选中的文本， 把选中的文本放在input中，且这时候选择器隐藏

                //部门模糊

                 form.on('select(selectUser)', function (data) {

                         console.log('选择select',data);  

                         selectpart=data.value;

                 

                var  txt = data.elem[data.elem.selectedIndex].text;

                console.log('输入的字',txt)

                $("#department").val(txt);

                // 选中数据之后进行隐藏

                $("#selectUser").css({ "display": "none" });

                 })

 

第三步：  在div中的框架中写入当input 输入信息的那一刻 调用onkeyup事件  同时也让select 控件控制显示select 用以人们选择 

1.在页面一开始的时候让select隐藏

 

        // 当键盘按下部门触发模糊查询

        function FuzzyEnquiry() {

                var deptmentinput= $("#department").val();  // input中输入的关键字

                document.getElementById("selectUser").style.display="block";  // 当键盘按下字的那一刻，然后进行查询显示且调取接口

 

                $.ajax(BaseServiceHost + listUnitByKeyUrl, {

                        data: {

                                token:tokenData,

                                key:deptmentinput

                        },

                        headers: {

                                'token': window.localStorage.getItem('token')

                        },

                        dataType: 'json',

                        type: 'post',

                        timeout: 10000,

                        beforeSend: function(data) {

                               

                                layer.load();

                        },

                        success: function(data) {

               

                                resetdepartment(data.data);

                        },

                        error: function(xhr, type, errorThrown) {

                                layer.closeAll('loading');

                        },

                        complete: function(XMLHttpRequest, textStatus) {

                                layer.closeAll('loading');

                        },

                });

                       

        }