Servlet+Ajax实现智能搜索框智能提示功能

利用无刷新技术智能变换搜索框的提示，同百度搜索

效果图

其基本原理：

1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)

2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗

如下为支持json的jar包

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>







.mouseOver{
 background: #708090;
 color: #FFFAFA;
}
.mouseOut{
 background: #FFFAFA;
 color: #000000;
}



 
  
  
  
  
  
   
  
 

SearchServlet.class

package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet{
 static List datas = new ArrayList();
 static{
  datas.add("ajax1");
  datas.add("ajax2");
  datas.add("ajax3");
  datas.add("bichi1");
  datas.add("bichi2");
  datas.add("php"); 
  datas.add("javascript"); 
  datas.add("java"); 
  datas.add("html"); 
 }
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException {
  //设置下编码格式
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("UTF-8");
  System.out.println("123");
  //首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常
  String keyword = request.getParameter("keyword");
  //获得关键字之后进行处理，得到关联数据
  List listData = getData(keyword);
  //返回json格式
  System.out.println(JSONArray.fromObject(listData));
  //JSONArray.fromObject(listData);
  response.getWriter().write(JSONArray.fromObject(listData).toString());
 }
 //获得关联数据方法
 public List getData(String keyword){
  List list = new ArrayList();
  for(String data:datas){
   //如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传
   if(data.contains(keyword)){
    list.add(data);
   }
  }
  return list;
 }
}

web.xml

 ajaxtest
 
  search.jsp
 
 
 
  search
  com.ninka.SearchServlet
 
 
  search
  /
 

以上所述是小编给大家介绍的Servlet+Ajax实现智能搜索框智能提示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！