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

最新推荐文章于 2024-08-31 18:03:39 发布

滕柳

最新推荐文章于 2024-08-31 18:03:39 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/tengliu6/article/details/52067475

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

11 篇文章

订阅专栏

JavaScript

9 篇文章

订阅专栏

本文介绍了一种前端级联查询的实现方式，通过使用EasyUI组件库中的combobox控件结合自定义JavaScript代码来完成。文章展示了如何设置下拉框，并在输入框中输入关键词时动态更新下拉选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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"；onchange="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" onblur="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="";
					
                };
            }