《Jquery实现自动提示》由会员分享，可在线阅读，更多相关《Jquery实现自动提示（8页珍藏版）》请在金锄头文库上搜索。
1、Jquery实现自动提示我在这里先给大家说一下这个设计思路，自动提 示肯定是异步提交，在用户输入每个字符都的进 行匹配，如果词库中的词条包含用户输入的字就 应该显示该词条。在这里提到词库，要想实现自 动提示那必须的有词源，也就是根据用户输入的 内容到这个词库中查找，这个要效率高，要不等 到用户已经搜索结束了才返回结果就毫无意义了 ，所以前几天写的dwr不是很好，jquery效率应 该更高，在这里会有很好的效果，下面我给大家 把代码贴出来，好让大家来参考(把所有代码直 接拷入就可以运行，我已经测试)页面代码： google.html var line = 0; function del() if
2、($(“#newDiv“) $(“#newDiv“).remove(); line = 0; $(document).ready(function() /文本框失去焦点时层消失 $(document.body).click(function() del(); ); $(document).keydown(function() / 38 上 40下 13 回车 if($(“#newDiv“) if(event.keyCode = 40) $(“table tbody tr“).eq(line) .css(“backgroundColor“, “blue“) .css(“color“, “whit
3、e“); $(“table tbody tr“).eq(line $(“table tbody tr“).length ? 0 : line + 1) .css(“backgroundColor“, “white“) .css(“color“, “black“); else if(event.keyCode = 13) $(“#key“).val($(“table tbody tr“).eq(line - 1).find(“td“).eq(0).html(); del(); ); $(“#key“).bind(“propertychange“, function() del(); var to
4、p = $(“#key“).offset().top; var left = $(“#key“).offset().left; var newDiv = $(“).width($(“#key“).width() + 6) .css(“position“, “absolute“) .css(“backgroundColor“, “white“) .css(“left“, left) .css(“top“, top + $(“#key“).height() + 6) .css(“border“, “1px solid blue“) .attr(“id“, “newDiv“); var table
5、= $(“) .attr(“cellpadding“, “0“) .attr(“cellspacing“, “0“); $.post(“jqueryServlet“, key: $(“#key“).val(), function(xml) $(xml).find(“results result“).each(function() var key = $(this).attr(“key“); var count = $(this).attr(“count“); var tr = $(“).css(“cursor“, “pointer“).mouseout(function() $(this).c
6、ss(“backgroundColor“, “white“).css(“color“, “black“); ).mouseover(function() $(this).css(“backgroundColor“, “blue“).css(“color“, “white“); ).click(function() $(“#key“).val($(this).find(“td“).eq(0).html(); del(); ); var td1 = $(“).html(key).css(“fontSize“, “12px“) .css(“margin“, “5 5 5 5“); var td2 =
7、 $(“).html(“共有“ + count + “个结果“) .attr(“align“, “right“).css(“fontSize“, “12px“) .css(“color“, “green“).css(“margin“, “5 5 5 5“); tr.append(td1).append(td2); table.append(tr); newDiv.append(table); ); ); $(document.body).append(newDiv); if($(“#key“).val() = “) $(“#newDiv“).remove(); ); ); 搜索 请输入搜索关键
8、字: 页面代码结束 下面是后台代码 package mrjia;import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException;import javax.servlet.ServletException; import javax.servlet.ht
9、tp.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class jqueryServlet extends HttpServlet public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(“text/
10、xml;charset=utf-8“); request.setCharacterEncoding(“utf-8“); PrintWriter out = response.getWriter(); String key = request.getParameter(“key“); System.out.println(key+“-“); StringBuilder xml = new StringBuilder(); xml.append(“); xml.append(“); xml.append(“); xml.append(“); xml.append(“); xml.append(“); xml.append(“); xml.append(“);
