通过mui框架和原生js实现html或web app中下拉框搜索功能，并获取自定义选中的值（使用apicloud中ajax调接口获取数据）

1.效果预览

默认状态

 获取全部

 

 搜索

 

 2.html部分

<div class="select">
        <div class="mui-input-row mui-search">
            <input id="selectValue" type="search" class="mui-input-clear" placeholder="请输入人员名称" />
        </div>
        <div class="selectItem" id="item-box">
        </div>
        <div onclick="selectfun()"><img src="../../icon/screen.png" alt="" /><span>筛选</span></div>
    </div>

3.js部分

    var userid = ""
        var itemBox
        var personData = []
        apiready = function () {
            All()
            var select = $api.dom('#selectValue')
            $api.addEvt(select, 'keypress', function (e) {
                var keycode = e.keyCode;
                if (keycode == '13') {
                    e.preventDefault();
                    //请求搜索接口   
                    var value = $api.byId('selectValue').value
                    selectfun() //点击搜索回车时处理函数
                }
            });
            document.getElementById("selectValue").addEventListener('focus', function (e) {
                var selectItem = $api.byId('item-box')
                $api.css(selectItem, 'display:block')
            });
            var item = $api.domAll('.item');
            mui("#item-box").on('click', '.item', function () {
                var userid = this.getAttribute('data-value')
                //获取到所点击的值之后的处理
                var selectItem = $api.byId('item-box')
                $api.css(selectItem, 'display:none')
            })
        };
        function createList(datas) {
            var html = ''
            for (var i = 0; i < datas.length; i++) {
                html += `<div class='item' data-value=` + datas[i].userId + `>` + datas[i].userName + `</div>`
            }
            $api.html(itemBox, html)
        }
        function likeData(value) {
            var datas = personData;
            itemBox = document.getElementById("item-box");
            createList(datas);
            document.getElementById("selectValue").addEventListener('input', function (e) {
                var val = e.target.value;
                v