基于Servlet和Ajax实现搜索框智能提示

xiaoya

发布日期: 2021-03-10 07:55:40 浏览量: 191
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

前段时间自己项目需要实现智能提示功能,于是在网上搜索了相关技术,发现这一篇博文介绍得较为详细,故自己排了下版面,转载到此处,方便自己今后查阅。

一、简介

搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索。有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示。这类提示就叫做搜索框的智能提示,本次就为大家介绍如何使用Servlet和Ajax来实现。主要介绍实现原理和代码的前后台实现过程。

二、项目分析

  • 实现语言:java

  • 实现方式:Ajax异步传输

  • 案例:比如百度的搜索框智能提示

理论分析

  • 在搜索框输入关键字

  • 浏览器将关键字异步发送给服务器

  • 服务器经过处理,将相应的数据以JSon(xml)格式返回给客户端

  • 客户端接收到服务器的响应数据,解析之后使用JS操作DOM显示数据

演示流程图分析

重点内容

  • 数据交互采用ajax方式

  • JavaScript解析数据动态展示

三、页面开发

3.1 HTML部分

body内容

  1. <body>
  2. <div id="mydiv">
  3. <!--输入框-->
  4. <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/>
  5. <input type="button" value="百度一下" width="50px">
  6. <!--内容展示区域-->
  7. <div id="popdiv">
  8. <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">
  9. <tbody id="content_table_body">
  10. <%--动态查询出来的数据,显示在此--%>
  11. </tbody>
  12. </table>
  13. </div>
  14. </div>
  15. </body>

3.2 CSS部分

样式代码

  1. <style type="text/css">
  2. #mydiv {
  3. position: absolute;
  4. left: 50%;
  5. top: 50%;
  6. margin-left: -200px;
  7. margin-top: -50px;
  8. }
  9. .mouseOver {
  10. background: #708090;
  11. color: #FFFAFA;
  12. }
  13. .mouseOut {
  14. background: #FFFAFA;
  15. color: #000000;
  16. }
  17. </style>

3.3 JavaScript部分

获取用户输入内容的关联信息的函数

  1. function getMoreContents() {
  2. //首先获取用户的输入
  3. var content = document.getElementById("keyword");
  4. if (content.value == "") {
  5. clearContent();
  6. return;
  7. }
  8. //然后给服务器发送用户输入的内容,因为采用ajax异步发送数据,所以使用XmlHttp对象
  9. xmlHttp = creatXMLHttp();
  10. //给服务器发送数据
  11. var url = "search?keyword=" + escape(content.value);
  12. xmlHttp.open("GET", url, true);
  13. //xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候被调用
  14. //xmlHttp 状态0-4,我们只关心4(complete),完成后再调用回调方法才有意义
  15. xmlHttp.onreadystatechange = callback;
  16. xmlHttp.send(null);
  17. }

获取XmlHttp对象

  1. function creatXMLHttp() {
  2. //对于大多数浏览器都适用
  3. var xmlHttp;
  4. if (window.XMLHttpRequest) {
  5. xmlHttp = new XMLHttpRequest();
  6. }
  7. //要考虑浏览器的兼容性
  8. if (window.ActiveXObject) {
  9. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  10. if (!xmlHttp) {
  11. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  12. }
  13. }
  14. return xmlHttp;
  15. }

回调函数

  1. function callback() {
  2. //4代表成功
  3. if (xmlHttp.readyState == 4) {
  4. //200代表服务器响应成功
  5. if (xmlHttp.status == 200) {
  6. //交互成功 获得响应的数据 是文本格式
  7. var result = xmlHttp.responseText;
  8. //解析数据
  9. var json = eval("(" + result + ")");
  10. //获取数据后动态显示 展示输入框下面
  11. setContent(json);
  12. }
  13. }
  14. }

设置关联数据展示

  1. function setContent(contents) {
  2. clearContent();
  3. setLocation();
  4. //获取关联数据的长度,以此来确定生成的<tr>
  5. var size = contents.length;
  6. //设置内容
  7. for (var i = 0; i < size; i++) {
  8. var nextNode = contents[i];//代表的是JSon数据的第i个元素
  9. var tr = document.createElement("tr");
  10. var td = document.createElement("td");
  11. td.setAttribute("border", "0");
  12. td.setAttribute("bgcolor", "#FFFAFA");
  13. td.onmouseover = function () {
  14. this.className = 'mouseOver';
  15. };
  16. td.onmouseout = function () {
  17. this.className = 'mouseOut';
  18. };
  19. td.onmousedown=function(){
  20. //当鼠标点击一个关联数据的时候,被选中的数据 自动填充到输入框里面
  21. document.getElementById("keyword").value=this.innerHTML;
  22. //清除div边框
  23. document.getElementById("popDiv").style.border="none";
  24. };
  25. var text = document.createTextNode(nextNode);
  26. td.appendChild(text);
  27. tr.appendChild(td);
  28. document.getElementById("content_table_body").appendChild(tr);
  29. }
  30. }

3.4 前后台程序联调

清空之前的数据

  1. function clearContent() {
  2. var contentTableBody = document.getElementById("content_table_body");
  3. var size = contentTableBody.childNodes.length;
  4. for (var i = size - 1; i >= 0; i--) {
  5. contentTableBody.removeChild(contentTableBody.childNodes[i]);
  6. }
  7. document.getElementById("popdiv").style.border = "none";
  8. }

输入框失去焦点 清空

  1. function keywordBlur() {
  2. clearContent();
  3. }

设置显示关联信息

  1. function setLocation() {
  2. //关联信息的显示位置
  3. var content = document.getElementById("keyword");
  4. var width = content.offsetWidth;//输入框的宽度
  5. var left = content["offsetLeft"];//距离左边框的距离
  6. var top = content["offsetTop"] + content.offsetHeight;//距离顶部
  7. //获取显示数据div
  8. var popdiv = document.getElementById("popdiv");
  9. popdiv.style.border = "black 1px solid";
  10. popdiv.style.left = left + "px";
  11. popdiv.style.top = top + "px";
  12. popdiv.style.width = width + "px";
  13. document.getElementById("content_table").style.width = width + "px";
  14. }

3.5 编写SearchServlet.java

  1. import net.sf.json.JSONArray;
  2. import javax.servlet.ServletException;
  3. import javax.servlet.http.HttpServlet;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import java.io.IOException;
  7. import java.util.*;
  8. public class SearchServlet extends HttpServlet {
  9. static List<String> datas = new ArrayList<String>();
  10. //模拟数据
  11. static {
  12. datas.add("ajax");
  13. datas.add("ajax post");
  14. datas.add("becky");
  15. datas.add("bill");
  16. datas.add("james");
  17. datas.add("jerry");
  18. datas.add("hao");
  19. }
  20. @Override
  21. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{
  22. request.setCharacterEncoding("utf-8");
  23. response.setCharacterEncoding("utf-8");
  24. System.out.print("123");
  25. //获取客户端数据
  26. String keyword = request.getParameter("keyword");
  27. //获取关键字
  28. List<String> listData = getData(keyword);
  29. //返回json格式
  30. response.getWriter().write(JSONArray.fromObject(listData).toString());
  31. }
  32. public List<String> getData(String keyword){
  33. List<String> list = new ArrayList<String>();
  34. for (String data:datas) {
  35. if(data.contains(keyword)){
  36. list.add(data);
  37. }
  38. }
  39. return list;
  40. }
  41. }

四、最终效果图

输入搜索信息下面会智能提示,点击提示信息会自动输入到搜索框中:

五、项目地址

geekerstar/AjaxSearch


版权声明:本文(除特殊标注外)为原创文章,版权归 Geekerstar 所有。

本文链接:http://www.geekerstar.com/project/620.html

除了有特殊标注文章外欢迎转载,但请务必标明出处,格式如上,谢谢合作。

本作品采用 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议 进行许可。

上传的附件 cloud_download AjaxSearch.7z ( 1.36mb, 1次下载 )

发送私信

嘎嘎嘎

15
文章数
16
评论数
最近文章
eject