Js+ajax实现智能百度搜索框

来源：互联网发布：javaweb项目知乎编辑：程序博客网时间：2024/05/18 07:36

首先浏览实现后的结果，输入一个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 stubdoPost(request, response);}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubrequest.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配置

<?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>index.html</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>

目录结构

阅读全文

0 0