Servlet+Ajax 实现搜索框智能提示

简介

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

项目分析

实现语言：Java 实现方式：AJAX 异步传输

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

理论分析： 1、在搜索框输入关键字。 2、浏览器将关键字 异步 发送给服务器。 3、服务器经过处理，将相应的数据以 JSON（XML）格式返回给客户端。 4、客户端接收到服务器的响应数据，解析之后使用 JS 操作 DOM 显示数据。

重点内容： 1、数据交互采用 AJAX 方式。 2、JavaScript 解析数据动态展示。

页面开发

HTML 部分

body 内容

```html

<%--动态查询出来的数据,显示在此--%>

```

CSS 部分

样式代码

```css

```

JavaScript 部分

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

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

获取 XmlHttp 对象

javascript function creatXMLHttp() { //对于大多数浏览器都适用 var xmlHttp; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //要考虑浏览器的兼容性 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if (!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; }

回调函数

```javascript function callback() { //4代表成功 if (xmlHttp.readyState == 4) { //200代表服务器响应成功 if (xmlHttp.status == 200) { //交互成功获得响应的数据是文本格式 var result = xmlHttp.responseText; //解析数据 var json = eval("(" + result + ")"); //获取数据后动态显示展示输入框下面 setContent(json);

            }
        }

} ```

设置关联数据展示

```javascript function setContent(contents) { clearContent(); setLocation(); //获取关联数据的长度,以此来确定生成的 var size = contents.length; //设置内容 for (var i = 0; i < size; i++) { var nextNode = contents[i];//代表的是JSon数据的第i个元素 var tr = document.createElement("tr"); var td = document.createElement("td"); td.setAttribute("border", "0"); td.setAttribute("bgcolor", "#FFFAFA"); td.onmouseover = function () { this.className = 'mouseOver'; }; td.onmouseout = function () { this.className = 'mouseOut'; }; td.onmousedown=function(){ //当鼠标点击一个关联数据的时候,被选中的数据自动填充到输入框里面 document.getElementById("keyword").value=this.innerHTML; //清除div边框 document.getElementById("popDiv").style.border="none";

            };
            var text = document.createTextNode(nextNode);
            td.appendChild(text);
            tr.appendChild(td);
            document.getElementById("content_table_body").appendChild(tr);
        }

} ```

前后台程序联调

清空之前的数据

javascript function clearContent() { var contentTableBody = document.getElementById("content_table_body"); var size = contentTableBody.childNodes.length; for (var i = size - 1; i >= 0; i--) { contentTableBody.removeChild(contentTableBody.childNodes[i]); } document.getElementById("popdiv").style.border = "none"; }

输入框失去焦点清空

javascript function keywordBlur() { clearContent(); }

设置显示关联信息

```javascript function setLocation() { //关联信息的显示位置 var content = document.getElementById("keyword"); var width = content.offsetWidth;//输入框的宽度 var left = content["offsetLeft"];//距离左边框的距离 var top = content["offsetTop"] + content.offsetHeight;//距离顶部 //获取显示数据div var popdiv = document.getElementById("popdiv"); popdiv.style.border = "black 1px solid"; popdiv.style.left = left + "px"; popdiv.style.top = top + "px"; popdiv.style.width = width + "px"; document.getElementById("content_table").style.width = width + "px";

} ```

编写 SearchServlet.java

```java

import net.sf.json.JSONArray;

import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.*;

public class SearchServlet extends HttpServlet { static List datas = new ArrayList (); //模拟数据 static {

    datas.add("ajax");
    datas.add("ajax post");
    datas.add("becky");
    datas.add("bill");
    datas.add("james");
    datas.add("jerry");
    datas.add("hao");

}

@Override
protected  void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException,IOException{
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    System.out.print("123");
    //获取客户端数据
    String keyword = request.getParameter("keyword");
    //获取关键字
    List<String> listData = getData(keyword);
    //返回json格式
    response.getWriter().write(JSONArray.fromObject(listData).toString());


}
public List<String> getData(String keyword){
    List<String> list = new ArrayList<String>();
    for (String data:datas) {
        if(data.contains(keyword)){
            list.add(data);
        }
    }
    return  list;
}

}

```

最终效果图

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

项目地址

geekerstar/AjaxSearch

版权声明：本文（除特殊标注外）为原创文章，版权归 Geekerstar 所有。

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

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

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