AJAX实现随笔提示功能

可以先在后台完成数据库的查询操作，这里直接使用city表。

 

完成后台的查询方法

    public List<City> findByKeyword(Stringkeyword) throws Exception {

       String hql = "FROM City AS c WHERE c.title LIKE ?";

       List<City> all = super.getHibernateTemplate().find(hql, keyword +"%");

       return all;

    }

完成页面的html代码

           请输入查询关键字: <inputtype="text"id="keyword"name="keyword"onkeyup="search(this.value)"/><input type="button" value="百度一下"/>

           <divid="result"style="border:1px solid;width:400px;display:none">

              <tablewidth="100%"id="result_table">

              </table>

           </div>

编写js的调用操作。

           function search(keyword){

              if(keyword.length> 0){

                  createXMLHttp();

                  xmlHttp.open("post","<%=basePath%>province_searchCity.action?keyword="+keyword);

                  xmlHttp.onreadystatechange= searchCallback;

                  xmlHttp.send();

              }

           }

          

           function searchCallback(){

              if(xmlHttp.readyState== 4){

                  if(xmlHttp.status== 200){

                     var str= xmlHttp.responseText;

                    var array = eval("("+str+")");

                  }

              }

           }

在Action中完成查询

    public String searchCity()throws Exception {

       // 注意,由于参数是通过?参数的,中文需要使用下面的方式处理乱码

       keyword = new String(keyword.getBytes("ISO-8859-1"), "UTF-8");

       List<City> allCities = service.searchCity(keyword);

       // 使用org.json来拼写内容

       // 建立一个数组

       JSONArray array = new JSONArray();

       // 循环建立对象

       Iterator<City> iter = allCities.iterator();

       while (iter.hasNext()) {

           City c = iter.next();

           JSONObject obj =new JSONObject();

           // 为对象设置属性,类似Map

           obj.put("id", c.getId());

           obj.put("title", c.getTitle());

           array.put(obj);

       }

 

       HttpServletResponse response = ServletActionContext.getResponse();

 

       // 设置编码,防止返回的数据出现乱码

       response.setCharacterEncoding("UTF-8");

       response.setContentType("text/html");

 

       PrintWriter out = response.getWriter();

       System.out.println(array.toString());

       out.print(array);

       out.close();

 

       return null;

    }

在回调函数中进行接收和处理。

           function searchCallback(){

              if(xmlHttp.readyState== 4){

                  if(xmlHttp.status== 200){

                     var str= xmlHttp.responseText;

                     var array= eval("("+str+")");

                    

                     if(array.length> 0){

                         // 通过div的innerHTML来拼入内容,方便设置事件

                         var div= document.getElementById("result");

                         // 显示出这个div

                         div.style.display = "";

                        

                         var text= '<table width="100%" id="result_table">';

                        

                         for(var i= 0;i< array.length;i++){

                            var title = array[i].title;

                            text += "<tr onmouseover='changeOverColor(this);' onmouseout='changeOutColor(this);'><td onclick='changeValue(this);'>"+title+"</td></tr>"

                         }

                        

                         text+="</table>";

                        

                         div.innerHTML= text;

                     }

                  }

              }

           }

          

           function changeValue(td){

              document.getElementById("keyword").value= td.innerText;

              document.getElementById("result").style.display= "none";

              rowIndex = -1;

           }

          

           function changeOverColor(tr){

              tr.style.background= "#dddddd";

           }

          

           function changeOutColor(tr){

              tr.style.background= "white";

           }

还可以加入键盘操作功能

           // 记录当前是在第几行

           var rowIndex= -1;

          

           function search(keyword,e){

              // 判断按下的是哪个键

              var keyCode= e.keyCode;

              // 取得当前div的显示状态

              var display= document.getElementById("result").style.display;

              var flag= false;

              if(display== ""){

                  if(keyCode ==38) {

                     // 上

                     // 取得所有的行

                     var allTr= document.getElementsByTagName("tr");

                     if(rowIndex >=0) {

                         changeOutColor(allTr[rowIndex])

                     }

                     rowIndex--;

                     if(rowIndex <0) {

                         rowIndex = allTr.length-1;

                     }

                     changeOverColor(allTr[rowIndex]);

                    

                  } else if (keyCode == 40){

                     // 下

                     // 取得所有的行

                     var allTr= document.getElementsByTagName("tr");

                     if(rowIndex >=0) {

                         changeOutColor(allTr[rowIndex])

                     }

                     rowIndex++;

                     if(rowIndex == allTr.length){

                         rowIndex = 0;

                     }

                     changeOverColor(allTr[rowIndex]);

                  } else if (keyCode == 13){

                     // 确定

                     // 从当前位置取得td的内容,进行设置

                     var allTd= document.getElementsByTagName("td");

                     if(rowIndex >=0) {

                         changeValue(allTd[rowIndex]);

                     }

                  } else {

                     flag = true;

                  }

              } else {

                  flag = true;

              }

             

              if(keyword.length> 0 && flag) {

                  createXMLHttp();

                  xmlHttp.open("post","<%=basePath%>province_searchCity.action?keyword="+keyword);

                  xmlHttp.onreadystatechange= searchCallback;

                  xmlHttp.send();

              }

           }