【JavaScript】Select下拉列表可输入的模糊查询

最新推荐文章于 2024-08-01 21:45:09 发布

滕柳

最新推荐文章于 2024-08-01 21:45:09 发布

阅读量1w

点赞数 3

分类专栏： -----JavaScript JavaScript

本文链接：https://blog.csdn.net/tengliu6/article/details/52067475

版权

-----JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

这个是我用了三天的时间做出来，虽然在自己的项目中没有用到，但是感觉还是挺有成就感的，好东西就应该分享一下。。

div style="position:relative";> 
<span style="overflow:hidden"> 

       学院：

       <select type="text"  id="academy" class="easyui-combobox" name="state" style="width: 150px; margin-right: 100px;margin-top: 60px"@* 级联查询 *@  url="/ConfigurationQue/QueryAllCollege";valueField="OrganizationID" textField="OrganizationName" required="true" editable="true"；οnchange="this.parentNode.nextSibling.value=this.value" >
			 <option value="上海">上海</option>
            <option value="廊坊">廊坊</option>
            <option value="北京">北京</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
       </select> </span><input type="text" id="txtSearch" maxlength="50" onClick="function" style="width:130px;margin-top: 60px;margin-left:225px;position:absolute;left:0px;background-color:transparent" οnblur="this.style.backgroundColor='#ffffff'"   />

  window.onload = function() {
                var txtSearch = document.getElementById("txtSearch");
                var selType = document.getElementById("academy").options;
                var List = [];
                for (var i = 0; i < academy.length; i++) {
                    List[i] = academy[i].value + "|" + academy[i].text;
                }
                txtSearch.onclick = function() {
                    var Html = "";
                    if (!(txtSearch.value.length < 1)) {
                        academy.length = 0;
                        for (var i = 0; i < List.length; i++) {
                            if (List[i].indexOf(txtSearch.value) > -1) {
                                academy.add(new Option(List[i].split("|")[1], List[i].split("|")[0]));
                            }
                        }
                    }
					txtSearch.value="";
					
                };
            }