Servlet+Ajax实现智能搜索框智能提示功能
来源：爱站网时间：2019-07-23编辑：网友分享
说到搜索框，相信大家都很熟悉，搜索框是我们每天工作都必备的，其实大家是否注意到有许多搜索功能，当输入内容时，都会有提示？今天就这个问题，爱站技术频道带大家学习Servlet+Ajax实现智能搜索框智能提示功能。
说到搜索框，相信大家都很熟悉，搜索框是我们每天工作都必备的，其实大家是否注意到有许多搜索功能，当输入内容时，都会有提示？今天就这个问题，爱站技术频道带大家学习Servlet+Ajax实现智能搜索框智能提示功能。
效果图
其基本原理：
1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)
2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗
如下为支持json的jar包
search.jsp
ajax搜索
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实现智能搜索框智能提示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对爱站技术频道网站的支持！
上一篇：Ajax 实现网站劫持的检测方法
下一篇：详解AJAX页面状态保持思路
