1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>模糊搜索</title>
    6.     <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    7.     <style type="text/css">
    8.  .second select {  
    9.      width: 11%;  
    10.      height: 106px;  
    11.      margin: 0px;  
    12.      outline: none;  
    13.      border: 1px solid #999;  
    14.      margin-top: 31px;  
    15.  }  
    16.  .second input {  
    17.      width: 167px;  
    18.      top: 9px;  
    19.      outline: none;  
    20.      border: 0pt;  
    21.      position: absolute;  
    22.      line-height: 30px;  
    23.      left: 8px;  
    24.      height: 20px;  
    25.      border: 1px solid #999;
    26.  }  
    27.  .second ul {  
    28.      position: absolute;  
    29.      top: 27px;  
    30.      border: 1px solid #999;  
    31.      left: 8px;  
    32.      width: 125px;  
    33.      line-height: 16px;  
    34.  }  
    35.  .ul li{  
    36.      list-style: none;  
    37.      width: 161px;  
    38.      /* left: 15px; */  
    39.      margin-left: -40px;  
    40.      font-family: 微软雅黑;  
    41.      padding-left: 4px;  
    42.  }  
    43.  .blue {    
    44.      background:#1e91ff;    
    45.  }  
    46.     </style>
    47. </head>
    48. <body>
    49. <span class="second">  
    50.    <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"/>  
    51.    <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">  
    52.        <option value="1">A</option>  
    53.        <option value="2">B</option>  
    54.        <option value="3">大白</option>  
    55.        <option value="4">小白</option>
    56.        <option value="5">123</option>  
    57.    </select>  
    58. </span>  
    59. <script type="text/javascript">
    60.     var TempArr=[];//存储option  
    61.     var TempV=[];  
    62.     $(function(){  
    63.     /*先将数据存入数组*/  
    64.     $("#typenum option").each(function(index, el) {  
    65.         TempArr[index] = $(this).text();  
    66.     });  
    67.     $(document).bind('click', function(e) {    
    68.         var e = e || window.event; //浏览器兼容性      
    69.         var elem = e.target || e.srcElement;    
    70.         while (elem) { //循环判断至跟节点，防止点击的是div子元素      
    71.             if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {    
    72.                 return;    
    73.             }    
    74.             elem = elem.parentNode;    
    75.         }    
    76.         $('#typenum').css('display', 'none'); //点击的不是div或其子元素      
    77.     });    
    78.     })  
    80.     function changeF(this_) {  
    81.     $(this_).prev("input").val($(this_).find("option:selected").text());  
    82.     $("#typenum").css({"display":"none"});  
    83.     }  
    84.     function setfocus(this_){  
    85.     $("#typenum").css({"display":""});  
    86.     var select = $("#typenum");  
    87.     for(i=0;i<TempArr.length;i++){  
    88.         // var option = $("<option></option>").text(TempArr[i]);  
    89.         var option = new Option()
    90.            option.text = TempArr[i]
    91.            option.value = TempV[i]  
    92.         select.append(option);  
    93.     }
    94.     setinput(this_);    
    95.     }  
    97.     function setinput(this_){  
    98.     var select = $("#typenum");  
    99.     select.html("");  
    100.     for(i=0;i<TempArr.length;i++){  
    101.         //若找到以txt的内容开头的，添option  
    102.         if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){  
    103.             // var option = $("<option></option>").text(TempArr[i]);  
    104.             var option = new Option()
    105.             option.text = TempArr[i]
    106.             option.value = TempV[i]  
    107.             select.append(option);  
    108.         }  
    109.     }  
    110.     }  
    111. </script>
    112. </body>
    113. </html>