Select下拉列表类(支持输入模糊查询)

最新推荐文章于 2021-06-07 11:35:25 发布
最新推荐文章于 2021-06-07 11:35:25 发布
阅读量2.2w 收藏 1
点赞数
分类专栏： PHP 文章标签： function testing null border div input 
<HTML>   
<HEAD>   
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>   
<TITLE>可输入的下拉框</TITLE>   

</HEAD>   
<BODY >   
  <Script Language="Javascript">
var j = 0;
function SelectValue(obj)
{
    var input = obj.parentNode.nextSibling;
    document.all.box2.value = obj.options[obj.selectedIndex].text;
    document.getElementById("txtSection").value=obj.options[obj.selectedIndex].value;
    alert(document.getElementById("txtSection").value);
}

function InputValue(obj)
{
    var n = 1;    
    var tmpObj;
    var src = document.all.SelectOption;
    var msg = document.all.msg;
    if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
        if(obj.value!=""){
             msg.style.display="";
             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.οnmοuseοver=function (){   
                    this.style.backgroundColor='#003399';   
                    this.style.color ='#ffffff'; 
                   }
                   selText.οnmοuseοut=function (){   
                    this.style.backgroundColor='#ffffff'; 
                    this.style.color ='#000000';
                   }
                   selText.οnclick=function (){   
                    document.all.box2.value = this.innerHTML;
                    msg.style.display="none";
                    document.getElementById("txtSection").value=this.value;
                   }
                    msg.appendChild(selText);
                    n++;
               }
             }
        }
        else {
            document.all.msg.style.display="none";
        }
    }
    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);
            document.all.box2.value = tmpObj.innerHTML;
            msg.style.display="none";
            document.getElementById("txtSection").value=tmpObj.value;
        }
    }
}

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

function NoMsg()
{    
    if(document.activeElement.id=="msg") 
        return false; 
    else
        document.all.msg.style.display='none';
}


  </Script>
 <TABLE border=0 cellPadding=1 cellSpacing=0 width="100%">
   

     <TR> 
      <TD width="24%"><font face="Arial" size="2">Section</font></TD>
      <TD COLSPAN=3 width="76%"> 

<div style="position:relative;">   
<span style="margin-left:230px;width:18px;overflow:hidden;">  

<select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-232px;" οnchange="SelectValue(this)" οnclick="SelMatch(this)"  id="SelectOption" name="SelectOption" >   
  <OPTION value='ALL' Selected>ALL</OPTION>
<OPTION value='0TEST1'>0TEST1 = Testing 1
<OPTION value='0TEST1'>0TEST2 = Testing 1
<OPTION value='0TEST1'>0TEST3 = Testing 1
<OPTION value='SECTION'>SECTION = Section Description XXXXX AAA
</OPTION>  
</select></span>
<input name="box2" id="box2" style="width:230px;position:absolute;left:0px;" οnkeyup="InputValue(this)"  οnblur="NoMsg()" οnfοcus="this.select();InputValue(this)" value="0" >   
<div id="msg" style="border:1px  solid green;  font-size :14PX;white-space:nowrap;overflow:hidden;
width:230px;position:absolute;left:0px;top:20px;display:none"></div>
</div>

    <Input Type="Hidden" Name="txtSection" id="txtSection">
      </TD>
    </TR>
    </TABLE>
<p>

</BODY></HTML>

  

morley_wang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS中Select下拉列表类(支持输入模糊查询)功能
10-20
主要介绍了JS中Select下拉列表类(支持输入模糊查询)功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
C#Web开发MVC下拉框Select选择
m0_64593363的博客
01-11 679
C#MVC视图中的下拉框select的运用
select结合input进行模糊搜索
Sudaofeng520的博客
06-26 1930
1：前端导入： &lt;script src="~/Content/js/select2/select2.min.js"&gt;&lt;/script&gt;&lt;link href="~/Content/js/select2/select2.min.css" rel="stylesheet" /&gt;//下拉绑定数据 $(function () {        //获取下拉框绑定的值   ..
html选择框加模糊查找,input selec下拉框模糊查询
weixin_33603331的博客
06-04 617
inputselec下拉框模糊查询1.[代码][JavaScript]代码//1 初始化时候,先将数据存入数组var TempArr = [];// 存贮optionvar SelectObj = document.frm.elements["demo"]/* 先将数据存入数组 */with (SelectObj){for (i = 0; i < length; i++){TempArr[...
html 下拉列表 模糊查询,JS Select下拉框(支持输入模糊查询)
weixin_31874603的博客
06-03 642
Insert title herefunction SelectValue(obj){document.all.box2.value = obj.options[obj.selectedIndex].text;}var j = 0;function InputValue(obj){var n = 1;var tmpObj;var src = document.all.SelectOption;va...
select 下拉框搜索实现模糊查询 的两种实现方法（h5标签实现、js实现）
热门推荐
weixin_43078114的博客
12-12 1万+
方法一（h5 datalist标签实现） 效果 不输入时： 输入1： 输入2： code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META content="fason,阿信" name=Author> <t...
JS Select下拉框(支持输入模糊查询)
10-20
【JS Select下拉框(支持输入模糊查询)】 在网页开发中，`<select>`元素通常用于创建下拉框，但原生的HTML `<select>`元素并不支持输入模糊查询功能。为了实现这一功能，我们需要利用JavaScript来扩展和增强下拉框的...
使用select2实现下拉列表动态模糊查询
09-28
综上所述，Select2 是一个功能强大的下拉列表插件，能帮助开发者轻松实现动态模糊查询、多选、分组等功能，提升用户体验。只需正确引入资源、初始化Select2并适当配置，就能将其功能融入到你的网页中。
layui下拉列表select实现可输入查找的方法
01-19
如下图，这是一个layui的下拉列表select，随着下拉数据越来越多，我们找...以上这篇layui下拉列表select实现可输入查找的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
SELECT标签实现模糊查询子项option
LLLLLiSHI的博客
06-27 2693
1、下载好select2的包，我实在 https://github.com/select2/select2/releases/tag/4.0.3 下载的 2、引入CSS样式： 3、引入JS：JQ和select2的js文件 4、给指定的select标签添加class属性： class="multiSelect" 5、页面记载函数中：
进行模糊查询+多选功能的下拉框（select） 模糊加载
05-26
自写的一个能进行 模糊查询+多选的下拉框（select） 本人亲测，肯定符合你的要求
下拉列表动态查询
05-25
纯js实现下拉列表内容的动态查询，附有demo实例，能够很简洁的实现功能
JSP页面中模糊查询
06-25
　模糊查询就是能根据输入的内容动态从数据库中查询出匹配的数据，并将数据显示在列表框 中，这在软件系统中经常用到。象搜索引擎Google、Baidu一样，在输入一个字或词后能在下拉列表框中列出数据库中的匹配项供用户选择，大大方便了 用户的输入。
php模糊查询并显示在下拉列表框,Select下拉框模糊查询功能实现代码
weixin_31162865的博客
03-23 601
select下拉列表框支持输入模糊查询功能，设计非常的人性化，下面小编给大家分享了关键代码，大家根据自己的需求适当的添加修改，有任何问题欢迎给我反馈。关键代码如下所示：可输入的下拉框var j = 0;function SelectValue(obj){var input = obj.parentNode.nextSibling;document.all.box2.value = obj.opti...
C# 向前台select写值
weixin_45062076的博客
02-02 261
seletID.Items.Add(new ListItem(“请选择”, “”));
html 下拉框模糊查询,简单实用js—可输入可选择可模糊查询的select下拉
weixin_33996020的博客
06-07 961
JS代码$(document).bind('click', function(e) {var e = e || window.event; //浏览器兼容性var elem = e.target || e.srcElement;while(elem) { //循环判断至跟节点，防止点击的是div子元素if(elem.id && (elem.id == 'title' || elem...
html 下拉框模糊查询,【JavaScript】Select下拉列表 可输入的模糊查询
weixin_32955207的博客
06-07 421
这个是我用了三天的时间做出来，虽然在自己的项目中没有用到，但是感觉还是挺有成就感的，好东西就应该分享一下。。div style="position:relative";>学院：上海廊坊北京广州深圳window.onload = function() {var txtSearch = document.getElementById("txtSearch");var selType = docu...
jsp下拉列表模糊查询
最新发布
11-22
以下是在JSP中实现下拉列表模糊查询的步骤： 1. 引入select2插件的CSS和JS文件。 ```html <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> ``` 2. 在JSP页面中添加一个下拉列表框，并为其添加一个id属性。 ```html <select id="mySelect" name="mySelect"></select> ``` 3. 使用jQuery代码初始化select2插件，并为其设置数据源和占位符。 ```html <script> $(document).ready(function() { $('#mySelect').select2({ placeholder: '请选择或输入', ajax: { url: 'data.jsp', dataType: 'json', delay: 250, data: function(params) { return { q: params.term }; }, processResults: function(data) { return { results: data }; }, cache: true } }); }); </script> ``` 4. 在data.jsp页面中处理查询请求，并返回JSON格式的数据。 ```jsp <%@ page contentType="application/json;charset=UTF-8" %> <% String q = request.getParameter("q"); // 根据查询条件q从数据库中查询数据 // 将查询结果转换为JSON格式的数据 out.print(jsonData); %> ``` 其中，q参数是select2插件自动发送的查询条件，可以根据需要进行处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值