下拉窗口中实时检索


<html>
<head>
<link rel="stylesheet" href="./xxx.css">
<title>aaaaa</title>
<script language='javascript'>
 function sort(strSort)
 { 
   initSelect();
   var obj = document.getElementById('oks');
   var length = obj.length-1;
   for(var i=length; i > -1; i--)
   {
     if(obj.options[i].text.indexOf(strSort) == -1)
     {
       obj.removeChild(obj.options[i]);
     }
   }
 }
 function initSelect()
 {   
    //这个数组可以以任意方式获取
    var arrText = new Array("张1","李4","张3","李4","李1","张2");
    var arrValue = new Array("bbb","cc","ddd","bbb","cc","ddd");
    var option = null;
    var obj = document.getElementById("oks");
    while(obj.childNodes.length > 0 )
    {
      obj.removeChild(obj.childNodes[0]);
    }
    
    for(var i=0; i< arrText.length; i++)
    {
     option = document.createElement("option");
     option.text = arrText[i];
      option.value = arrValue[i];
      obj.options.add(option);
    }
 }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post" action="#">
<p class="dys">
<select name="oks" id="oks">
 <option value="bbb">张1</option>
 <option value="cc">李4</option>
 <option value="ddd">张3</option>
  <option value="bbb">李4</option>
 <option value="cc">李1</option>
 <option value="ddd">张2</option>
</select></p>
<p class="dyw"><input type="text" name="okw" id="okw" value="" onkeyup="sort(this.value);"/></p>
</form>
</body>
</html>xxx.cssform,p {
 margin:0;
 padding:0;
}
form {
 position:relative;
}
.dys {
 position:absolute;
 z-index:5;
 left:111px;
 width:18px;
 overflow:hidden;
}
.dys select {
 margin-left:-111px;
 width:129px;
}
.dyw {
 position:absolute;
 z-index:4;
 #top:-1px;
}
.dyw input {
 width:120px;
 /*firefox ie7 ie6 以实际情况为准*/
 height:19px;*height:auto;!important;*height:auto; 
}

解决方案 »

  1.   

    感谢楼上，基本有点像！但是我需要打一个字母就能列出相关汉字，如：李一，李二，李三，liyi,libing,  我输入L就会出来L开头的文字与字母，并自动显示在下方
      

  2.   

    感谢楼上，基本有点像！但是我需要打一个字母就能列出相关汉字，如：李一，李二，李三，liyi,libing,  我输入L就会出来L开头的文字与字母，并自动显示在下方
      

  3.   


      Demo:   
      http://webfx.eae.net/dhtml/combobox/combo_demo.htm   
      Download:   
      http://webfx.eae.net/dhtml/combobox/ComboBox.zip自己下载好好研究一下吧，至于你输入字母L能匹配到＂李＂来，这个难度就大了．没有想到好办法．
      

  4.   

    你可以看哪个demo.看看效果不就知道了．
      

  5.   

    类似google suggest效果！楼主可以看看相关文章我用LUCENE只实现了前半部分字母识别暂时还没实现 似乎要一个很完整的拼音字典之类吧等待高人！