WEB下拉框模糊查询

最新推荐文章于 2023-12-17 20:01:19 发布
最新推荐文章于 2023-12-17 20:01:19 发布
阅读量1.5k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： web function div null class input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GTBGT525/article/details/5870505

js:

 

 


var j = 0;
function SelectValue(obj,txtId,divBoxId)
{
    var input = obj.parentNode.nextSibling;
    document.getElementById(divBoxId).value = obj.options[obj.selectedIndex].text;
    document.getElementById(txtId).value=obj.options[obj.selectedIndex].value;
    //alert(document.getElementById(txtId).value);
}

function InputValue(obj,txtId,selectId,msgId,divBoxId,objDisplaySelect)
{
    var n = 1;   
    var tmpObj;
    var src = document.getElementById(selectId);
    var msg = document.getElementById(msgId);
   
           if(objDisplaySelect!=undefined&&msg.style.display=="")
            {
              var objSelect= objDisplaySelect.split(",");
              for(var i=0; i<objSelect.length;i++)
              {
               document.getElementById(objSelect[i]).style.display="none";
              }
             }
            else if(objDisplaySelect!=undefined&&msg.style.display=="none")
            {
               var objSelect= objDisplaySelect.split(",");
              for(var i=0; i<objSelect.length;i++)
              {
               document.getElementById(objSelect[i]).style.display="";
              }
            }
    if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
        if(obj.value!=""){
            if(objDisplaySelect!=undefined)
            {
              var objSelect= objDisplaySelect.split(",");
              for(var i=0; i<objSelect.length;i++)
              {
               document.getElementById(objSelect[i]).style.display="none";
              }
             }
              msg.style.display="";
              msg.innerText="";//msg.innerHTML=""  ;
             if(msg.hasChildNodes())
             {
                msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);
             }
            
             for (var i=0;i<src.length;i++){
               var selValue = document.createElement("div");
               var selText = document.createElement("div");
               selText.value = src(i).value;
               selText.innerHTML = src(i).text;         

               if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){
                    selText.setAttribute("id","selText"+n);
                    selText.onmouseover=function (){  
                    this.style.backgroundColor='#003399';  
                    this.style.color ='#ffffff';
                   }
                   selText.onmouseout=function (){  
                    this.style.backgroundColor='#ffffff';
                    this.style.color ='#000000';
                   }
                   selText.onclick=function (){  
                   if(objDisplaySelect!=undefined)
                   {
                     var objSelect= objDisplaySelect.split(",");
                     for(var i=0; i<objSelect.length;i++)
                     {
                       document.getElementById(objSelect[i]).style.display="";
                     }
                   }
                    document.getElementById(divBoxId).value = this.innerHTML;
                    msg.style.display="none";
                    document.getElementById(txtId).value=this.value;
                   }
                    msg.appendChild(selText);
                    n++;
               }
             }
        }
        else {
            document.getElementById(msgId).style.display="";
            document.getElementById(txtId).value="-1";
             if(objDisplaySelect!=undefined&&msg.style.display=="")
            {
              var objSelect= objDisplaySelect.split(",");
              for(var i=0; i<objSelect.length;i++)
              {
               document.getElementById(objSelect[i]).style.display="none";
              }
             }
            else if(objDisplaySelect!=undefined&&msg.style.display=="none")
            {
               var objSelect= objDisplaySelect.split(",");
              for(var i=0; i<objSelect.length;i++)
              {
               document.getElementById(objSelect[i]).style.display="";
              }
            }
//            if(objDisplaySelect!=undefined)
//            {
//              var objSelect= objDisplaySelect.split(",");
//              for(var i=0; i<objSelect.length;i++)
//              {
//               document.getElementById(objSelect[i]).style.display="none";
//              }
//             }
              if(msg.hasChildNodes())
             {
                 msg.innerText="";
                 for(var i=0;i<msg.childNodes.length;i++)
                 msg.childNodes[i].parentNode.removeChild(msg.childNodes[i]);
             }
            
               for (var i=0;i<src.length;i++){
                 var selValue = document.createElement("div");
                 var selText = document.createElement("div");
                 selText.value = src(i).value;
                 selText.innerHTML = src(i).text;         
                 selText.setAttribute("id","selText"+n);
                 selText.onmouseover=function ()
                 {  
                 this.style.backgroundColor='#003399';  
                 this.style.color ='#ffffff';
                 }
                 selText.onmouseout=function ()
                 {  
                 this.style.backgroundColor='#ffffff';
                 this.style.color ='#000000';
                 }
                 selText.onclick=function ()
                 {  
                     if(objDisplaySelect!=undefined)
                     {
                       var objSelect= objDisplaySelect.split(",");
                        for(var i=0; i<objSelect.length;i++)
                        {
                          document.getElementById(objSelect[i]).style.display="";
                         }
                      }
                    document.getElementById(divBoxId).value = this.innerHTML;
                    msg.style.display="none";
                    document.getElementById(txtId).value=this.value;
                 }
                 msg.appendChild(selText);
                 n++;
             }
           
        }
    }
    else {
        //press down key
        if(event.keyCode==40){
            j++;
            for (var i=0; i<src.length; i++)
            {
                tmpObj = document.getElementById("selText"+i);
                if(tmpObj != null){
                    tmpObj.style.backgroundColor='#ffffff';
                    tmpObj.style.color ='#000000';
                }               
            }
            tmpObj = document.getElementById("selText"+j);
            if(tmpObj != null){
                tmpObj.style.backgroundColor='#003399';  
                tmpObj.style.color ='#ffffff';
            }else{
                j = 0;
            }           
        }
        //press up key
        if (event.keyCode==38){
            j--;
            for (var i=0; i<src.length; i++)
            {
                tmpObj = document.getElementById("selText"+i);
                if(tmpObj != null){
                    tmpObj.style.backgroundColor='#ffffff';
                    tmpObj.style.color ='#000000';
                }               
            }
            tmpObj = document.getElementById("selText"+j);
            if(tmpObj != null){
                tmpObj.style.backgroundColor='#003399';  
                tmpObj.style.color ='#ffffff';
            }else{
                j = 2;
            }       
        }
        //press enter key
        if (event.keyCode==13){
            tmpObj = document.getElementById("selText"+j);
            if(tmpObj !=null)
            {
            document.getElementById(divBoxId).value = tmpObj.innerHTML;
            msg.style.display="none";
            document.getElementById(txtId).value=tmpObj.value;
//              if(objDisplaySelect!=undefined)
//              {
//               var objSelect= objDisplaySelect.split(",");
//               for(var i=0; i<objSelect.length;i++)
//                {
//                 document.getElementById(objSelect[i]).style.display="";
//                }
//              }
            }
        }
    }
}

function SelMatch(src,divBoxId)
{
    var currSel = document.getElementById(divBoxId).value;
    for (var i=0;i<src.length;i++){
        if (src(i).text==currSel)
        {
            src.options(i).selected = true;
        }       
    }
}

function NoMsg(megId,objDisplaySelect)
{   
    if(document.activeElement.id==megId)
        return false;
    else
    {
         if(objDisplaySelect!=undefined)
          {
             var objSelect= objDisplaySelect.split(",");
              for(var i=0; i<objSelect.length;i++)
             {
               document.getElementById(objSelect[i]).style.display="";
             }
          }
        document.getElementById(megId).style.display="none";
    }
}

 

html:

<div class="selectStyle">
                   <span id="dropSpan" class="selectSpan" style="margin-left:234px;width:18px; " > 
                       
                    <asp:DropDownList ID="dropDowListDept" runat="server"  CssClass="selectDorpDown" onchange="SelectValue(this,'txtSection','inputSearchName')" onclick="SelMatch(this,'inputSearchName')"  ></asp:DropDownList>
                 
                    </span>
                    <input name="inputSearchName" id="inputSearchName" style="width:234px;" class="inputPosition"  onkeyup="InputValue(this,'txtSection','<%=dropDowListDept.ClientID %>','msg','inputSearchName','<%=MonthSelect.ClientID%>,<%=DropDownListKqType.ClientID %>')"  onblur="NoMsg('msg','<%=MonthSelect.ClientID%>,<%=DropDownListKqType.ClientID %>')" onfocus="InputValue(this,'txtSection','<%=dropDowListDept.ClientID %>','msg','inputSearchName','<%=MonthSelect.ClientID%>,<%=DropDownListKqType.ClientID %>')" value="全部" />
                   
                    <div id="msg" style="width:230px; height:250px; display:none;" class="selectDivStyle"> </div>
                    <input type="hidden" name="txtSection" id="txtSection" />
                  
               </div>

 

 

CSS:

 

.glist {overflow:no;}
.glist .border_table{border-top:1px solid #9EB2EC;border-left:1px solid #9EB2EC;border-right:1px solid #9EB2EC;}
.glist .header{background-color:#BBCCFF;height:31px;}
.glist .header td{border-top:#FFF solid 1px;vertical-align:middle;text-align:center;}
.glist .header .colLeft{border-left:#FFF solid 1px;}
.glist .header .col{border-left:#FFF solid 1px;}
.glist .header .colRight{border-left:#FFF solid 1px;}
.glist .item{height:23px;}
.glist .item td{text-align:center;vertical-align:middle;border-bottom:1px solid #9EB2EC;}
.glist .item .col{border-left:1px solid #9EB2EC;}
.glist .item .colRight{border-left:1px solid #9EB2EC;}
.glist .empt td{border-bottom:1px solid #9EB2EC; text-align:center;}
.glist .oper{border:1px #000;}

.itemImport .item .colExceptionColor {background-color:#FF712D;}

.itemSpan {height:20px;width:75px;text-align:center;background-color:#E3E9FF;}
.selectStyle{position:absolute;}
.selectStyle .bodyOverflow {overflow:auto;}
.selectStyle .inputPosition {position:absolute;left:0px;}
.selectStyle .selectDivStyle{border:1px  solid #9EB2EC;  font-size :14px;white-space:nowrap;overflow:auto;position:absolute;left:0px;top:20px; background-color:#FFF; }
.selectStyle .selectSpan{overflow:hidden;}
.selectStyle .selectDorpDown{height: 22px; width: 250px; margin-left:-232px;display:none}

 

 

GTBGT525
关注
模糊查询下拉框插件
04-28
可模糊查询下拉框加载的数据，可解决下拉框数据过长，不好查询的问题。测试过很好用
javaweb模糊查询
qq_45556336的博客
09-24 1146
javaweb模糊查询 “select * from goods where 1=1 and name like ?” pst.setString(1,"%"+keyword+"%");
在WEB项目里实现对数据库模糊查询
最新发布
2201_75563143的博客
12-17 229
模糊查询思维逻辑：1.在前端定义搜索的表单页面，请求地址；2.在DAO页面定义seach方法，编写JDBC模糊查询，便于调用;3.Seach.java中地址请求，获取用户搜索的关键词，执行模糊查询，把查询到的商品信息存到session中起别名，之后跳转到主页展示信息；
下拉列列表＋搜索模糊查询功能
WK2017的博客
05-28 1202
插件 searchableSelect，使用起来非常简单！ 直接引入css和js 直接就是引入插件的css和JS;在入口函数中直接通过获取下拉的ID直接调用searchableSelect()方法就可以使用了！ 在1处输出，2处展示模糊查询的数据！ 链接：https://pan.baidu.com/s/1G9Oc9qwJ7s4MPtPHwxSC7A 提取码：ap7y 网盘中存储css和js,j...
JavaWeb（模糊查询&评论&include指令）
Bugxiu_fu的博客
04-04 387
一、模糊查询 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>查找新闻--管理后台</title> <link href="/Project01/css/admin.css" rel="stylesheet" type="text/css
Angular实现下拉框模糊查询功能示例
10-18
在Angular中实现下拉框模糊查询功能，主要是为了提高用户在选择列表项时的效率和体验。通过允许用户输入部分关键词，系统会自动过滤出与输入相匹配的下拉选项，这种功能通常被称为实时搜索或者自动补全。下面我们将...
Select下拉框模糊查询功能实现代码
12-10
在网页开发中，为了提升...总的来说，实现下拉框模糊查询功能涉及到HTML、CSS和JavaScript的综合运用。通过监听用户输入和键盘事件，动态生成匹配项并处理选中状态，可以极大地提升用户在交互过程中的效率和满意度。
下拉框模糊查询
11-28
在IT领域，尤其是在开发用户界面时，"下拉框模糊查询"是一个常见的功能，它使得用户可以在下拉框中输入部分文字，系统会自动匹配并显示包含这些文字的选项。这个功能大大提高了用户体验，减少了用户查找特定选项的...
jQuery下拉框模糊搜索菜单选择代码
06-10
在这个“jQuery下拉框模糊搜索菜单选择代码”项目中，我们主要探讨的是如何利用jQuery和Bootstrap框架来实现一个具有智能搜索功能的下拉菜单。 首先，Bootstrap是一个流行的前端开发框架，提供了丰富的UI组件，如...
实现高效下拉框模糊查询功能
为了解决这一问题，模糊查询功能应运而生。模糊查询允许用户通过输入关键词，实时过滤出符合条件的下拉选项，从而快速找到所需信息。 ### 下拉模糊查询功能实现原理 模糊查询的实现原理主要是基于事件监听、数据...
web分页加模糊查询实例
12-23
简单的分页模糊查询mysql数据库的数据，用jsp，sevlet显示出来，.sql语句是创建数据表的
DropDownList模糊查询
11-09
好看又实用的下拉框模糊查询，Jquery实现的，方便操作数据
JSP页面中模糊查询
06-25
　模糊查询就是能根据输入的内容动态从数据库中查询出匹配的数据，并将数据显示在列表框 中，这在软件系统中经常用到。象搜索引擎Google、Baidu一样，在输入一个字或词后能在下拉列表框中列出数据库中的匹配项供用户选择，大大方便了 用户的输入。
进行模糊查询+多选功能的下拉框（select） 模糊加载
05-26
自写的一个能进行 模糊查询+多选的下拉框（select） 本人亲测，肯定符合你的要求
javaweb对商品名的模糊查询(附源码)
04-21
NULL 博文链接：https://liaojuncai.iteye.com/blog/1918084
JavaWeb模糊查询&评论&include指令
qq_62331938的博客
04-02 2443
前言 上次九歌分享了绑定以及删除修改查询；这次来分享模糊查询发布评论以及include指令。这几天因为种种原因没有及时更新很不好意思。 一、模糊查询 代码如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>查找新闻--管理后台</title>
Web应用开发中的【下拉框选项列表抽象】
凡江林的博客
10-13 925
1. 需求描述 在Web应用开发中，经常需要操作表格，或是填写表单。在这些操作过程中，有一类通用的操作：下拉框选项列表。为什么说通用呢，通用在于，表格的显示过程中，如果存储的是另一张表格的id或者编码，就像学生表中，存储了所在班级的编号一样。学生表和班级表是两张表，而在学生表中，并不直接存储班级名称，而是存储的班级ID，或是班级编码。这个时候，如果前端并不修改对应的班级，则后台请求的时候，直接关联查询，把对应的班级名称关联上去即可。然而，大多数时候，前端是需要对班级进行修改的。 这个时候，不管是通过表格编辑
实现textbox输入时模糊查询
weixin_30429201的博客
05-06 988
时间有点紧,有点浮躁,暂时只把相关的文件挑出来看下,思路有时间再整理 1。引用的一个文件 代码 //JScript文件//********************************************************//创建日期:2010-05-5//內容说明:自动完成JS类//用法：//onkeyup="findNames('id1','id2','...
Java Web快速入门(模糊查询&评论&include指令)
oyang的博客
04-09 2451
JSP项目使用下拉框+文本框实现模糊查询，发表评论以及include指令
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值