自动联想下拉菜单完善

最新推荐文章于 2024-07-11 18:00:32 发布

Daniel_White

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量919

点赞数

文章标签： javascript html ajax servlet

本文链接：https://blog.csdn.net/dd491194651/article/details/20647655

版权

接上一篇。

这次完成效果是，选中联想选项，选项变色；点击选项时文本框填充选项，etc……

代码是在search.jsp页面改动。searchservlet没有改动。

javascript代码

 <script type="text/javascript">
   //创建对象
   var xmlHttpRequest;
    function createXML(){
      if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
      }else if(window.XMLHttpRequest){
        return new XMLHttpRequest();
       }
     }
  //发送请求
   function send2(){
    xmlHttpRequest=createXML();
   var name= document.getElementById("name").value;
   var url="SearchServlet?name="+name+"&id="+Math.random();
   xmlHttpRequest.onreadystatechange = haoLeJiaoWo; 
   xmlHttpRequest.open("post",url,true);
   xmlHttpRequest.send(null);
   
    }
  //回调函数
   function haoLeJiaoWo(){
 
     if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200    ){
       
     var str=xmlHttpRequest.responseText;
       var div1=document.getElementById("Layer1");
       div1.style.display="block";
       if(str==""||str==null){
       div1.style.display="none";
       }
         var arr=str.split("-");
         var divStr="";
         for(var i=0;i<arr.length;i++){
          divStr+="<div class='outcss' οnclick='txt(this)' οnmοuseοver='over(this)' οnmοuseοut='out(this)'>"+arr[i]+"</div>";
         }
          div1.innerHTML=divStr;
      
     }
   }
   
   function txt(obj){
   document.getElementById("name").value=obj.innerHTML;
   document.getElementById("Layer1").style.display="none";
   }
   
   function over(obj){
   	obj.className="overcss";
   }
   
   function out(obj){
   obj.className="outcss";
   
   }

  
  </script>

body代码：

<body>
<div id="Layer1" style="display:none"></div>
<form id="form1" name="from" method="get" action="SearchServlet">
  <label>
  <input type="text" id="name" name="name" οnkeyup="send2()"/>
  <input type="submit" name="Submit" value="百度一下" />
  </label>
</form>
</body>

css样式：

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:10px;
	top:38px;
	width:166px;
	border: 1px solid #000000;
	z-index:1;
}

.outcss{
background-color: white;
padding: 1px 2px 1px 8px;
}

.overcss{
background-color: gray;
padding: 1px 2px 1px 8px;
}
-->
</style>

Daniel_White

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动联想下拉菜单完善

接上一篇。这次完成效果是，选中联想选项，选项变色；点击选项时文本框填充选项，etc……代码是在search.jsp页面改动。searchservlet没有改动。javascript代码 //创建对象 var xmlHttpRequest; function createXML(){ if(window.ActiveXObject){
复制链接

扫一扫