select 下拉框模糊查询

最新推荐文章于 2023-07-01 15:23:08 发布

么么酱

最新推荐文章于 2023-07-01 15:23:08 发布

阅读量1.9k

点赞数

文章标签： select html 下拉框模糊查询

本文链接：https://blog.csdn.net/u012805128/article/details/15471907

版权

在网上看了几个demo,都不是很理想，索性自己写了一个，功能很简单，下拉框本不支持手动输入，使用input模拟下拉框，支持手动输入及页面级的模糊查询

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
  <style type="text/css">
    #selectText{
     width:180px;
    }
    #inputText{
     left: 9px;
        position: absolute;
    }
    #selectWrap{
     border: 1px solid #000000;
        width: 177px;
        display: none;
    }
    #selectWrap p {
     margin:0;
     padding:0;
      font-size: 14px;
     
    }
    .mouseOver_p{
     color:#fff;
     background: #000;
    }
  </style>
</head>
 
<body>
<div id="wrap">
 <select id="selectText" οnchange="checkSelect(this)">
  <option>1113y</option>
  <option>2224r</option>
  <option>444r</option>
  <option>55rtdsd</option>
  <option>444r</option>
  <option>qqq</option>
  <option>wwwww</option>
  <option>eee</option>
  <option>ft1234567890</option>
  <option>你好我在测试rqQ</option>
 </select>
    <input type="text" id="inputText" οnkeyup="checkInput(this)" />
    <div id="selectWrap"></div>
</div>
<script type="text/javascript">
     var optionArr=[];
         setCookie();
         
 function checkInput(obj){  
  var currentValue = obj.value;  
  var selectText = document.getElementById("selectText"); 
  var wrap = document.getElementById("wrap");
  var selectWrap = document.getElementById("selectWrap");
  var newArr=[''];
  if( currentValue==""){
   var cookie = getCookie();
               for(var i=0;i<cookie.length;i++){
                    newArr.push(cookie[i]);
                }  
   }else{
    optionArr.length = null;
    var allSelectOption = initSelectOption();
    for(var i=0;i<allSelectOption.length;i++){ 
             if(allSelectOption[i].indexOf(currentValue)>=0){
                 newArr.push(allSelectOption[i]);
                }
               } 
           if(newArr.length == 1){
       newArr.length = 0;    
      } 
          }
  selectWrap.innerHTML = "";
   var objP;
        for(i=0;i<newArr.length;i++){
                 objP = document.createElement("p");
                  objP.innerHTML=newArr[i];    
                  objP.setAttribute("onmouseover","objMouseOver(this)") ;
                  objP.setAttribute("onclick","objClick(this)") ;
                  objP.setAttribute("onmouseout","objMouseOut(this)") ;
                  selectWrap.appendChild(objP);          
        } 
        wrap.appendChild(selectWrap); 
        document.all.selectWrap.style.display = "block";    
 }
 
  function checkSelect(obj){
     document.getElementById("inputText").value = obj.options[obj.selectedIndex].text;
     selectText.multiple = "";
  }
  
  function initSelectOption(){
    var selectText = document.getElementById("selectText"); 
    for(var i=0;i<selectText.children.length;i++){
     optionArr.push(selectText.children[i].text);
    }  
    return optionArr;
  }
  function setCookie(){
     document.cookie =initSelectOption();
  }
  function getCookie(){
   var cookie =document.cookie.split(","); 
   return cookie;
  }
  
  function objMouseOver(obj){
       obj.setAttribute("class","mouseOver_p")||obj.setAttribute("classname","mouseOver_p");
  }
   function objClick(obj){
    document.getElementById("inputText").value = obj.innerHTML;
     document.all.selectWrap.style.display = "none";   
  }
   function objMouseOut(obj){
      obj.setAttribute("class","")||obj.setAttribute("classname","");
  }
</script>
</body>
</html>