Servlet+Ajax如何实现智能搜索框智能提示功能
小编给大家分享一下Servlet+Ajax如何实现智能搜索框智能提示功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联公司成都网站建设定制设计,是成都网站营销推广公司,为凿毛机提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站改版热线:18982081108
利用无刷新技术智能变换搜索框的提示,同百度搜索
效果图
其基本原理:
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
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 Listdatas = 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如何实现智能搜索框智能提示功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章名称:Servlet+Ajax如何实现智能搜索框智能提示功能
转载注明:http://hbruida.cn/article/jcgehg.html