这篇文章主要介绍了Servlet+Ajax实现智能搜索框智能提示功能,需要的朋友可以参考下
利用无刷新技术智能变换搜索框的提示，同百度搜索
效果图
其基本原理：
1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)
2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗
如下为支持json的jar包
search.jsp
<title>ajax搜索</title> /* #mydiv{ position: absolute; left:30%; top:50%; margin-left: 100px; } */ .mouseOver{ background: #708090; color: #FFFAFA; } .mouseOut{ background: #FFFAFA; color: #000000; } <div id="mydiv"> <!-- 输入框 --><!-- 下面是内容展示的区域 --><div id="popDiv"> <table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0"> <tbody id="content_table_body"> <!-- 这个是动态查询出来的数据显示的地方 --><!-- <tr><td>ajax1</td></tr> <tr><td>ajax2</td></tr> <tr><td>ajax3</td></tr> --></tbody></table></div></div>
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.Ht<strong style="color:transparent">来源gaodai#ma#com搞@代~码网</strong>tpServletRequest; 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？因为在js中定义url的时候写的是search -->searchcom.ninka.SearchServlet search/
以上就是Servlet+Ajax实现智能搜索框智能提示功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Servlet+Ajax实现智能搜索框智能提示功能
转载请注明原文链接：Servlet+Ajax实现智能搜索框智能提示功能
