带输入查询功能匹配下拉框的几种实现方式

在Web开发中我们经常需要用户进行输入操作，输入框内我们输入几个字，输入框就会出现下拉提示你可能要输入的完整信息。下面我总结了几种常见的方案：

一：EasyUi combobox 组合框

具体使用方法官方文档上有详细介绍：http://www.jeasyui.net/plugins/169.html。

当然，你若觉得样式不怎么好看，引入easyui的 js 和css,可以进行简单的样式调整如下：

.textbox {

            webkit-border-radius: 0px;

            border-radius: 0px;

            border: 1px solid #DDD;

            margin-left: 20px;

            margin-top: 5px;

            width: 377px !important;

.....

        }

二：select与input文本框的结合

 将text文本框覆盖到select下拉框上, 通过onchange()给文本框赋值，这也是网上比较常见的一种方式。

三：使用html5 的dataList

                <input type="text" id="textSelect" list="dataListForSelect" />

                    <datalist id="dataListForSelect">

                        <option value="Monday" />

                        <option value="Tuesday" />

                        <option value="Wednesday" />

                        <option value="Thursday" />

                        <option value="Friday" />

                        <option value="Saturday " />

                        <option value="Sunday" />

                        <option value="Year" />

                        <option value="Month" />

                        <option value="Day" />

                    </datalist>

这是一种比较简洁的写法，支持Firefox、Chrome、Opera和部分IE，不支持ios。也有说不支持Android，作者亲自使用过可以支持Android（暂未发现不支持的安卓机型）。如果是移动端开发的话，不建议采用这种方式。

四：div ul li 与 input布局 ,模拟可输入下拉框

Js动态创建div,使用定位将其定位到input下，用li模拟select的option，其样式可以自己随便定义。具体实现效果图如下：

实现代码：

Css: ul {

            margin-top: 0px;

            padding-left: 0px;

        } 

        li {

            padding: 0px;

            list-style: none;

            height: 35px;

            line-height: 35px;

            display: block;

            border-bottom: 1px solid #DDD;

        }

            li:hover {

                background-color: #DDD;

            }

Html：   <input type="text" id="txtExma" style="width: 200px; margin: 0 auto;" name="name" value="" οninput="my_div(this)"  />    建议使用oninput. 测试发现部分手机不支持onkeyup事件 

Js:

var global_qymc = new Array();

                        for (var i = 0; i < 20; i++) {

                            global_qymc.push("ddsds" + i);//模拟数据源

                        }

                        var objinput;

                        function itemClick(o) {

                            var data = $.trim($(o).text());

                            $(objinput).val(data);

                            $(".createDIv").each(function () {

                                $(this).hide();

                            });

                        } 

                        function my_div(o) {

                            objinput = o;

                            var absoluteP = o.getBoundingClientRect();

                            var o_l = absoluteP.left, o_t = absoluteP.top, o_w = $(o).width();

                            var t_value = $(o).val().trim();

                            var c_div = document.createElement("div");

                            c_div.style.cssText = "position:absolute;width:" + (o_w + 4) + "px;height:60%;top:" + (o_t + 22) + "px;left:" + o_l + "px;border:0px solid #ccc;overflow-y:auto;overflow-x:hidden;background-color:white;";

                            c_div.className = "createDIv";

                            var html = "";

                            var newArray = new Array();

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

                                var arr_vla = new Array();

                                var k = 0;

                                while (k < t_value.length) {

                                    var s = "";

                                    while (t_value.charCodeAt(k) < 256) {

                                        s = s + t_value.charAt(k);

                                        k++;

                                        break;

                                    }

                                    if (s != "") {

                                        arr_vla.push(s);

                                    }

                                    var s = "";

                                    while (t_value.charCodeAt(k) > 256) {

                                        s = s + t_value.charAt(k);

                                        k++;

                                        break;

                                    }

                                    if (s != "") {

                                        arr_vla.push(s);

                                    }

                                } 

                                var isTure = false;

                                for (var s = 0; s < arr_vla.length; s++) {

                                    if (global_qymc[i].indexOf(arr_vla[s]) != -1) {

                                        isTure = true;

                                    } else {

                                        isTure = false;

                                        break;

                                    }

                                }

                                if (isTure) {

                                    newArray.push(global_qymc[i]);

                                }

                            }

                            if (newArray == null) {

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

                                    html += "<li style='width:100%;' class='liitem' οnclick='itemClick(this)'>&nbsp;&nbsp;" + global_qymc[i] + "</li>";

                                }

                            } else {

                                if (newArray.length != 0) {

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

                                        html += "<li style='width:100%;' class='liitem' οnclick='itemClick(this)'>&nbsp;&nbsp;" + newArray[i] + "</li>";

                                    }

                                } else {

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

                                        html += "<li style='width:100%;' class='liitem' οnclick='itemClick(this)'>&nbsp;&nbsp;" + global_qymc[i] + "</li>";

                                    }

                                }

                            }

                            c_div.innerHTML = "<ul>" + html + "</ui>";

                            $("body").append(c_div);

                        }

 https://download.csdn.net/download/fastpat/10526657

 

如有问题，欢迎批评指正！如你有更好的方案，欢迎大家互相交流学习！

转载于:https://www.cnblogs.com/xiaocRole/p/9169173.html