AJAX实现随笔提示功能

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

 

完成后台的查询方法

public List<City> findByKeyword(String keyword) throws Exception {        String hql = "FROM City AS c WHERE c.title LIKE ?";        List<City> all = super.getHibernateTemplate().find(hql, keyword + "%");        return all;     }

完成页面的html代码

请输入查询关键字: <input type="text" id="keyword" name="keyword" onkeyup="search(this.value)"/> <input type="button" value="百度一下"/>            <div id="result" style="border:1px solid;width:400px;display:none">               <table width="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 οnmοuseοver='changeOverColor(this);' οnmοuseοut='changeOutColor(this);'><td οnclick='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();               }            }