当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS+Ajax实现百度智能搜索框

JS+Ajax实现百度智能搜索框

2017年12月12日  | 移动技术网IT编程  | 我要评论

首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax+js。

前端search.jsp

<%@ page language="java" contenttype="text/html; charset=utf-8" 
  pageencoding="utf-8"%> 
<html> 
<head> 
<title>insert title here</title> 
<script src="js/jquery.min.js"></script> 
<style type="text/css"> 
  *{ 
   margin: 0 auto; 
   padding: 0; 
  } 
  li{ 
    margin:0; 
    height: 20px; 
    width: 200px; 
    list-style: none; 
  } 
  /* #c li:hover{ 
   background-color: #f9f9f9; 
  } */ 
  .onmouse{ 
   background-color: #f9f9f9; 
  }  
  .outmouse{ 
   background-color:white; 
  } 
  #contain{ 
   width: 50%; 
  } 
</style> 
<!-- jquery --> 
<script type="text/javascript"> 
var xmlhttp; 
  function getmorecontents() { 
  var content=document.getelementbyid("keyword"); 
  if(content.value==""){ 
    clearcontent(); 
    return;//如果不设置，传到后台的是空值，所有的值都会被输出 
  } 
  xmlhttp=creatxmlhttp(); 
  //alert(xmlhttp); 
  //要给服务器发送数据 
  var url="searchservlet?keyword="+escape(content.value); 
  xmlhttp.open("get",url,true); 
  xmlhttp.onreadystatechange=callback; 
  xmlhttp.send(null); 
} 
  //获取xmlhttp对象 
 function creatxmlhttp() { 
  var xmlhttp; 
  if(window.xmlhttprequest){ 
    xmlhttp=new xmlhttprequest(); 
  } 
  if(window.activexobject) 
  { 
    xmlhttp=new activexobject("microsoft.xmlhttp"); 
    if(!xmlhttp){ 
      xmlhttp=new activexoject("msxml2.xmlhttp"); 
    } 
  } 
  return xmlhttp; 
} //获取xmlhttp对象 
  function callback() { 
  if(xmlhttp.readystate==4 && xmlhttp.status==200){ 
     var result=xmlhttp.responsetext; 
     //解析数据 
     var json=eval("("+result+")"); 
     //动态显示数据，线束数据在输入框对的下面 
     setcontent(json); 
  } 
} 
//设置关联数据的展示 
function setcontent(contents) { 
  clearcontent(); 
  var size=contents.length; 
  for(var i=0;i<size;i++) 
    { 
     var nextnode=contents[i];//json格式的第i个数据 
     var li =document.createelement("li"); 
     li.onmouseover=function(){ 
       this.classname="onmouse"; 
       document.getelementbyid("keyword").value=this.innerhtml; 
     } 
     li.onmouseout=function(){ 
       this.classname="outmouse"; 
     } 
     var text=document.createtextnode(nextnode); 
     li.appendchild(text); 
     document.getelementbyid("c").appendchild(li); 
    } 
} 
//清空数据 
function clearcontent() { 
  document.getelementbyid("c").innerhtml=""; 
} 
//当控件失去焦点时，清空数据 
function outfouce() { 
  clearcontent(); 
} 
//获得焦点时， 
</script> 
</head> 
<body> 
  <div id="contain"> 
    <div style="height: 20px;"> 
      <input type="text" id="keyword" style="size:50px;" onkeyup="getmorecontents()" onblur="outfouce()" onfocus="getmorecontents()">  
      <input type="button" id="bu" value="百度一下" style=""> 
    </div> 
    <div id="popdiv"> 
     <ul id="c"> 
       <li></li> 
     </ul> 
    </div> 
  </div> 
</body> 
</html>

后台searchservlet.java

package search; 
import java.io.ioexception; 
import java.util.arraylist; 
import java.util.list; 
import net.sf.json.jsonarray; 
import javax.servlet.servletexception; 
import javax.servlet.annotation.webservlet; 
import javax.servlet.http.httpservlet; 
import javax.servlet.http.httpservletrequest; 
import javax.servlet.http.httpservletresponse; 
/** 
 * servlet implementation class searchservlet 
 */ 
@webservlet("/searchservlet") 
public class searchservlet extends httpservlet { 
  private static final long serialversionuid = 1l; 
  static list<string> datas=new arraylist<string>(); 
  static {//假数据，模拟数据库读取 
    datas.add("ajax"); 
    datas.add("bjax"); 
    datas.add("ajaxfd"); 
    datas.add("bfvd"); 
    datas.add("dafdx"); 
    datas.add("fdax"); 
    datas.add("ahg"); 
    datas.add("ddx"); 
  } 
  /** 
   * @see httpservlet#httpservlet() 
   */ 
  public searchservlet() { 
    super(); 
    // todo auto-generated constructor stub 
  } 
  /** 
   * @see httpservlet#doget(httpservletrequest request, httpservletresponse response) 
   */ 
  protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { 
    // todo auto-generated method stub 
    dopost(request, response); 
  } 
  /** 
   * @see httpservlet#dopost(httpservletrequest request, httpservletresponse response) 
   */ 
  protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { 
    // todo auto-generated method stub 
    request.setcharacterencoding("utf-8"); 
    response.setcharacterencoding("utf-8"); 
    string keyword=request.getparameter("keyword"); 
    //system.out.println(keyword); 
    list<string> listdata= getdata(keyword); 
  // 返回json,以流的形式写到前台 
    response.getwriter().write(jsonarray.fromobject(listdata).tostring()); 
  } 
  //获取假数据中符合条件的值 
  public list<string> getdata(string keyword) 
  { 
    list<string> list=new arraylist<string>(); 
    for(string data:datas) 
    { 
      if(data.contains(keyword)){ 
        list.add(data); 
      } 
    } 
    return list; 
  } 
}

xml配置

<span style="font-size:18px;"><strong><?xml version="1.0" encoding="utf-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemalocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="webapp_id" version="3.1"> 
 <servlet> 
  <servlet-name>searchservlet</servlet-name> 
  <servlet-class>search.searchservlet</servlet-class> 
 </servlet> 
 <servlet-mapping> 
  <servlet-name>searchservlet</servlet-name> 
  <url-pattern>/search/searchservlet</url-pattern> 
 </servlet-mapping> 
 <display-name>dropmeum</display-name> 
 <welcome-file-list> 
  <welcome-file></welcome-file> 
  <welcome-file>index.htm</welcome-file> 
  <welcome-file>index.jsp</welcome-file> 
  <welcome-file>default.html</welcome-file> 
  <welcome-file>default.htm</welcome-file> 
  <welcome-file>default.jsp</welcome-file> 
 </welcome-file-list> 
</web-app></strong></span>

目录结构

总结

以上所述是小编给大家介绍的js+ajax实现百度智能搜索框，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网