Servlet+Ajax实现智能搜索框智能提示功能-js教程-PHP中文网

这篇文章主要介绍了servlet+ajax实现智能搜索框智能提示功能,对ajax感兴趣的朋友可以参考下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"%>



ajax搜索

SearchServlet.class

思高数码广场

修订记录：1.用户登陆增加了验证码，提高了安全性，登陆后不再显示登陆框。2.修改成了相对路径，不再一定需要放置在网站根目录下面。3.修改了类别搜索功能，并且可以暂时屏蔽，而不是删除，修改了先增加大类后出现无法修改中类名称的bug。4.增加了产品修改，可以保存修改。5.原来是借用别人的流量统计系统，不能统计某个页面的访问量，现采用的count.seecool.net的流量统计。6.帮助中心采用了fa

下载

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实现智能搜索框智能提示功能，希望对大家有所帮助！！