带有搜索提示的下拉框

一个可以搜索选项值得下拉框

 

 

 

 

 

 

 

 

 

这个是插件的效果,先给大家展示下,加下来是我的代码和效果展示

 

Html 代码

<input id="input2" class="col-12" type="text" State="0">

                @*父下拉框*@

                <div class="col-12 px-0 border" id="father">

                    <p class="border-bottom pl-1 my-0  px-0 mx-0  layui-icon row justify-content-between" index="1" >测试1 <i class="pr-2">></i></p>

                    <p class="border-bottom pl-1 my-0  px-0 mx-0  layui-icon row justify-content-between" index="2">测试2 <i class="pr-2">></i></p>

                    <p class="border-bottom pl-1 my-0  px-0 mx-0  layui-icon row justify-content-between" index="3">测试3 <i class="pr-2">></i></p>

                    <p class="border-bottom pl-1 my-0  px-0 mx-0  layui-icon row justify-content-between" index="4">测试4 <i class="pr-2">></i></p>

                </div>

Jq代码

   //声明一个空数组用于接收

        var dataArr = [];

        var dataList = document.getElementById('dataList');

        $(function () {

            //鼠标移入改变背景颜色

            $("p").click(function () {

                $("#input2").val( $(this).text())

                $("#father").attr("hidden", true)

                $("#child").attr("hidden", true)

                $("#grandson").attr("hidden", true)

                $("#input2").attr("State", "0")

            })

        })

        //初始化搜索下拉框的p

        function onload() {  //初始化dataArr的数据

            var childs = dataList.children;

            for (var i = 0; i < childs.length; i++) {

                dataArr.push(childs[i].innerText);

            }

        }

        //当输入框获取了焦点

        function showDiv(sign) {

            var X=$(sign).attr("index")

            if (X==0) {

                dataList.style.display = "";

                $("#dataList").css("display", "block")

                $(sign).attr("index","1")

            } else {

                $("#dataList").css("display", "none")

                $(sign).attr("index", "0")

            }

        }

        //数据框编辑时调用

        function filterP() {

            var e = event.target || event.srcElement;

            var str = e.value;

            dataList.innerHTML = '';  //清空div下的所有P元素

            dataArr.forEach(function (item) {

                if (item.indexOf(str) != -1) {

                    var p = document.createElement('p');

                    var text = document.createTextNode(item);

                    p.appendChild(text);

                    dataList.appendChild(p);

                }

            })

            if (dataList.innerHTML == '') {

                var p = document.createElement('p');

                var text = document.createTextNode('暂无数据');

                p.style.color = '#d7d7d7';

                p.onclick = function () { event.stopImmediatePropagation(); }  //阻止事件的冒泡

                p.appendChild(text);

                dataList.appendChild(p);

            }

        }

        //下拉框的点击事件

        function pushInput() { //利用事件委托机制,获取点击的P源

            var e = event.target || event.srcElement;

            var input = document.getElementById('input');

            input.value = e.innerText;

            dataList.style.display = 'none';

            $("#input").attr("index", "0")

        }

代码就这些 可以直接复制

主要原理就是放弃了原本的select改用input和一个div来代替下拉框以及一堆p代替选项

当我在input中编辑时就循环div中的p标签查到p标签中包含我输入的内容

接下来就是效果展示了

若嫌弃不够插件美观的,可以自己用html美化.

好了,这就是我这次分享的内容.