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

迷南。 2022-09-24 11:22 280阅读 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="";
    					
                    };
                }

![Center][]

[Center]: /images/20220719/cde61c45fde4457fa7cff011e42a698b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关可下拉可输入的输入框实现方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2023年01月08日 02:10/ 0 赞/ 318 阅读

相关下拉框模糊匹配_巧用数据验证制作模糊匹配的下拉列表

对于Excel的参照性输入，我们一般会使用数据验证里面的序列功能。常规下我们用作系列的数据源无非就是一个数据列表。但这种处理有个很大的问题，那就是如果系列里面的数据项太多，那么

雨点打透心脏的1/2处/ 2023年01月06日 04:25/ 0 赞/ 150 阅读

相关 winform下拉框模糊查询_怎样在c#中实现数据库数据的模糊查询

我想在vs的 dataGridView中显示查询的内容。具体是在文本框中输入一个关键字，然后在数据库的一个表的所有字段进行查询，显示在dataGridView,麻烦大家

灰太狼/ 2023年01月01日 05:57/ 0 赞/ 332 阅读

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

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

迷南。/ 2022年09月24日 11:22/ 0 赞/ 281 阅读

相关 Bootstrap可多选、搜索的下拉列表

示例图：可搜索 ![可搜索][20151104115410821] 区分大小写搜索 ![区分大小写搜索][20151104115429802] 需要引用boo

冷不防/ 2022年08月09日 18:48/ 0 赞/ 526 阅读

相关下拉框（可输入+自动匹配）--gxy

地址来源： [https://www.cnblogs.com/brandonhulala/p/5990482.html][https_www.cnblogs.com_bra

川长思鸟来/ 2022年06月02日 00:19/ 0 赞/ 234 阅读

相关 EasyUI下拉列表中实现输入框不可手动输入

<input type="text" id="tfi\_type" class="easyui-combobox" data-options="prompt:'请选择数据类型'

朱雀/ 2022年05月25日 11:23/ 0 赞/ 258 阅读

相关可编辑下拉列表

转载[http://zxh277100963.iteye.com][http_zxh277100963.iteye.com] 使用CSS样式设置，兼容IE、Chrome、Fi

柔光的暖阳◎/ 2022年04月14日 06:08/ 0 赞/ 301 阅读

相关 2015/10/25 用bootstrap selectpicker实现带模糊查询的下拉列表

今天的时间比较宽松，就整理一下自己这两天使用到的一个小插件功能吧，不求涉及太广，只是为了自己更好的理解。实现功能：下拉列表显示人员列表，支持输入关键字进行模糊查询（人员列表

缺乏、安全感/ 2021年12月24日 15:25/ 0 赞/ 165 阅读

相关 uniapp 列表搜索模糊查询

<template> <view>

àì夳堔傛蜴生んèń/ 2021年09月07日 06:06/ 0 赞/ 2571 阅读