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

html页面

<input type="text" id="keyword" onkeyup="getMore()" size="50"> <input type="button" value="百度一下" width="50px">
    <div id="popdiv">
      <table id="contend_table" bdcolor="#fffafa" border="0" >
          <tbody id="contend_table_tbody">
          <!-- 动态显示数据在这个地方 -->
          
          </tbody>
      </table>

    </div>

js代码

<script type="text/javascript">
        var XmlHttp;
        function getMore(){
          //首先获得用户的输入信息

          var contents=document.getElementById("keyword")

          //如果输入为空的话

          if(contents.value=="")

          {

            //清空输入框里的数据

              clearContent();
              return;
          }  
          //然后要给服务器发送用户输入的内容，我们采用的是Ajax异步发送数据，所以需要一个XmlHttp对象
          XmlHttp=new XMLHttpRequest();
          //给服务器发送数据
          var url="search?keyword="+escape(contents.value);
          XmlHttp.open("Get",url,true);
          //绑定回调方法
          XmlHttp.onreadystatechange=callback;
          XmlHttp.send(null);
        }
        //回调函数
        function callback(){
           if(XmlHttp.readyState==4){
              if(XmlHttp.status==200){
                    //交互成功，获得相应数据。是文本格式
                     var result=XmlHttp.responseText;
                     //解析获得数据
                     var json=eval("("+result+")");
                     //获得数据，展示数据
                     setContend(json);
              }
           }
        }
        //清空文本框下面<tbody></tbody>里的数据

        function clearContent(){

          //获取<tbody></tbody>里的数据

           var contendTbody=document.getElementById("contend_table_tbody");

         //<tbody></tbody>里面的数据长度

           var size=contendTbody.childNodes.length;
           for(var i=size-1; i>=0;i--)

           {

             //通过循环遍历一个一个删掉获取到的数据

              contendTbody.removeChild(contendTbody.childNodes[i]);
           }
        }
  
        //关联数据的展示
        function setContend(contents)

        {

                 //清空<tbody></tbody>里面的数据

                  clearContent();
                 //首先获取关联数据的长度
                 var size=contents.length;
                 for(var i=0; i<size; i++)
                 {
                     var nextNode=contents[i];
                     //动态的生成tr和td
                     var tr=document.createElement("tr");
                     var td=document.createElement("td");
                     td.setAttribute("border","0");
                     td.setAttribute("bgcolor","#FFFAFA");
                     var text=document.createTextNode(nextNode);
                     td.appendChild(text);
                     tr.appendChild(td);
                     document.getElementById("contend_table_tbody").appendChild(tr);
                 }
        }  
  
      </script>

  后台代码

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
  //首先接受从客户端发送来的数据
String keyword=request.getParameter("keyword");
List<String> listData=getData(keyword);//获得一个集合
//System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}

public List<String> getData(String keyword)
{
List<String> datas=new ArrayList<String>();
datas.add("ajax");
datas.add("bennet");
datas.add("javascript");
datas.add("java");
datas.add("hibente");
datas.add("buties");
datas.add("aoteman");
datas.add("hanse");
List<String> list=new ArrayList<String>();
for(String data:datas)
{
if(data.contains(keyword))
{
list.add(data);
}
}
return list;

}

配置文件

<servlet>
     <servlet-name>search</servlet-name>
     <servlet-class>com.SearchServlet</servlet-class>
     </servlet>
     
     <servlet-mapping>
         <servlet-name>search</servlet-name>
         <url-pattern>/search</url-pattern>
     </servlet-mapping>