当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

用文本框中在下拉列表中搜索用JS来实现,该如何解决

2012-02-25
用文本框中在下拉列表中搜索用JS来实现!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

用文本框中在下拉列表中搜索用JS来实现
<!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=gb2312" />
<title>无标题文档</title>
</head>

<body>
<style type="text/css"> 
<!-- 
#Layer1 { 
  position:absolute; 
  left:100px; 
  top:37px; 
  width:200px; 
  height:60px; 
  z-index:1; 
  border-top-width: 1px; 
  border-right-width: 1px; 
  border-bottom-width: 1px; 
  border-left-width: 1px; 
  border-top-style: outset; 
  border-right-style: outset; 
  border-bottom-style: outset; 
  border-left-style: outset; 
} 
body,td,th { 
  font-size: 9pt; 
} 
--> 
</style> 
<SCRIPT language="JavaScript"> 
var OldValue; 
OldValue = ""; 
function chazhao(NewValue) 
{  
  var ss="" 
  if(NewValue=="") 
  { 
  return false; 
  } 
  if (OldValue != NewValue) 
  {  
  OldValue = NewValue; 
  var sels=document.getElementById("sel"); 
  //alert(sels.options[1].innerText); 
  var le=sels.options.length; 
  for(i=0;i <le;i++) 
  { 
   
  if((sels.options[i].innerText).indexOf(NewValue)!=-1) 
  {  
ss=ss+" <span style=width:147;cursor:hand onMouseover=this.style.background='#cccccc' onMouseout=this.style.background='#ffffff' onclick=document.getElementById('Layer1').style.display='none';document.getElementById('wenben').value='"+sels.options[i].innerText+"'> "+sels.options[i].innerText+" </span> <br> "
 
} 
  if(ss!="") 
  {  
  document.getElementById("jieguo").innerHTML=ss; 
  document.getElementById("Layer1").style.display=""; 
  } 
  } 
  } 
} 
</script> 
   
  <select id="sel" style="width:147;margin-left:-133">  
  <option value="我们"> 我们 </option>  
  <option value="张一"> 张一 </option>  
  <option value="张二"> 张二 </option> 
  <option value="张四"> 张四 </option>  
  <option value="李二"> 李二 </option> 
  <option value="爱在西元"> 爱在西元 </option> 
  <option value="在爱西元"> 在爱西元 </option> 
  <option value="西元"> 西元 </option> 


  <option value="快发现"> 快发现 </option> 
  <option value="在问"> 在问 </option> 
  <option value="在问2"> 在问2 </option> 
  <option value="在问3"> 在问3 </option> 
  <option value="在使用"> 在使用 </option> 
  <option value="微软"> 微软 </option> 
  <option value="拼音输入法"> 拼音输入法 </option> 
  <option value="部分"> 部分 </option> 
  <option value="笔输入"> 笔输入 </option> 
  <option value="每次"> 每次 </option> 
  <option value="每次有"> 每次有 </option> 
  <option value="按下"> 按下 </option> 
  <option value="都会触"> 都会触 </option> 
  <option value="事件"> 事件 </option> 
  <option value="事件啊"> 事件啊 </option>
  <option value=" QS338416"> QS3384 16</option>
<option value=" QS338416"> QS3384 15</option>
<option value=" QS338416"> QS3355 16</option>
<option value=" QS338416"> QS344 16</option>
  </select> </span> 
<div id="Layer1" style="display:none"> 
<div id="jieguo"> </div> </div> 
<input id="wenben" style="border-right:0;width:133;overflow:hidden" onKeyUp="chazhao(this.value)"> <span style="width:130;overflow:hidden">  
</body>
</html>

运行以上代码功能如下,当我在右边文本框中输入下拉列式中的值时,然后相应的就会搜索出相关的内容.用鼠标点搜索出来就会响应到文本框中．
但是有一个问题是当我搜索QS3355 16，QS3384 15．．．相似这样的值时，能搜索出但用鼠标就不会响应．请高手求解．急！！！

[解决办法]
你把“我们”改成“我 们”输入“我”查找后也不能点～～～原因是～～～～～～～～

因为中间有空格～～
--------------------
onclick=document.getElementById('Layer1').style.display='none';document.getElementById('wenben').value='"+sels.options[i].innerText+"'> "+sels.options[i].innerText+" </span> <br> " 
-----------------------
onclick=xxxxx xxxxx //xxx xxx没有用引号引起来～会被认为是断句


[解决办法]

HTML code
 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  <htmlxmlns="http://www.w3.org/1999/xhtml">  
  <head>  
  <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>  
  <title> 无标题文档  </title>  
  </head>  
  
  <body>  
  <style type="text/css"> 
  <!-- 
 #Layer1 { 
  position:absolute; 
  left:100px; 
  top:37px; 
  width:200px; 
  height:60px; 
  z-index:1; 
  border-top-width: 1px; 
  border-right-width: 1px; 
  border-bottom-width: 1px; 
  border-left-width: 1px; 
  border-top-style: outset; 
  border-right-style: outset; 
  border-bottom-style: outset; 
  border-left-style: outset; 
 } 
 body,td,th { 
  font-size: 9pt; 
 } 
 --> 
  </style> 
  <SCRIPT language="JavaScript"> 
 var OldValue; 
 OldValue = ""; 
 function chazhao(NewValue) 
 { 
 //debugger; 
 var ss=""  
 
 if(NewValue=="") 
 { 
 return false; 
 } 
 if (OldValue != NewValue) 
 {  
 OldValue = NewValue; 
 var sels=document.getElementById("sel"); 
 //alert(sels.options[1].innerText); 
 var le=sels.options.length; 
 for(i=0;i <le;i++) 
 {   
 if((sels.options[i].innerText).indexOf(NewValue)!=-1) 
 {  
 ss = ss + "  <span style=width:147;cursor:hand  "; 
 ss = ss + " onMouseover=this.style.background='#cccccc' ";  
 ss = ss + " onMouseout=this.style.background='#ffffff' "; 
 ss = ss + " onclick=\"document.getElementById('Layer1').style.display='none';"; 
 ss = ss + " document.getElementById('wenben').value='"+sels.options[i].innerText+"'\" >"; 
 ss = ss + sels.options[i].innerText; 
 ss = ss + " </span> <br>";   
 } 
 } 
 if(ss!="") 
 { 
 document.getElementById("jieguo").innerHTML=ss; 
 document.getElementById("Layer1").style.display=""; 
 } 
 } 
 } 
  </script> 
  
  <select id="sel" style="width:147;margin-left:-133">  
  <option value="我们">   我们    </option>    
  <option value="张一">   张一    </option>    
  <option value="张二">   张二    </option>    
  <option value="张四">   张四    </option>      
  <option value="李二">   李二    </option>    
  <option value="爱在西元">   爱在西元    </option>    
  <option value="在爱西元">   在爱西元    </option>    
  <option value="西元">   西元    </option>    
  <option value="快发现">   快发现    </option>    
  <option value="在问">   在问    </option>    
  <option value="在问2">   在问2    </option>    
  <option value="在问3">   在问3    </option>    
  <option value="在使用">   在使用    </option>    
  <option value="微软">   微软    </option>    
  <option value="拼音输入法">   拼音输入法    </option>    
  <option value="部分">   部分    </option>    
  <option value="笔输入">   笔输入    </option>    
  <option value="每次">   每次    </option>    
  <option value="每次有">   每次有    </option>    
  <option value="按下">   按下    </option>    
  <option value="都会触">   都会触    </option>    
  <option value="事件">   事件    </option>    
  <option value="事件啊">   事件啊    </option>  
  <option value="   QS338416">   QS3384   16  </option>  
  <option value="   QS338416">   QS3384   15  </option>  
  <option value="   QS338416">   QS3355   16  </option>  
  <option value="   QS338416">   QS344   16  </option>  
  
  </select>  </span> 
  <div id="Layer1" style="display:none"> 
  <div id="jieguo"> </div> </div> 
  <input id="wenben" style="border-right:0;width:133;overflow:hidden" onKeyUp ="chazhao(this.value)">  
 
  <span style="width:130;overflow:hidden">  
  </body>  
  </html>

阅读人气排行