仿百度搜索显示下拉框（二）

我们在上一篇文章中已经实现了下拉框的弹出，这篇文章我们来说实现换色，以及点击跳转怎么实现，我们将代码先展示出来:

$(function() {
    $("#search").keyup(function() {
     var rname = $(this).val();
        if (rname != null && "" != rname) {
            $.post("/listName", {
                "rname" : rname
            }, function(data) {
                var json = eval(data);
                console.log(data)
                var html = "<table border='0' width='410px'>";
                for (var i = 0; i < json.length; i++) {
                    html += "<tr><td>" + json[i].rname + "</td></tr>";
                }
                html += "</table>";
                $("#dtn").show().html(html);

            //鼠标移动换色，点击跳转
              $("tr").bind("mouseover", function() {

                $(this).css("background-color", "gainsboro");
               });
              $("tr").bind("mouseout", function() {
                $(this).css("background-color", "ghostwhite");
              });
              $("tr").bind("click", function() {
                location.href = "/route_detail.html?rname=" + $(this).find("td").text();
              });

            } ,"json");
        } else {
            $("#dtn").hide();
        }
    });

可以看到我们给行标签绑定了三个事件：鼠标移入，鼠标移出，以及鼠标点击事件，分别触发不同的函数，这里需要注意的一个问题是，我们需要将此例代码放到post回调函数里面，这里可能涉及到post回调函数的作用域问题，否则这三个事件不会触发。此外，我们可以来简单了解下text()，以及html()的区别，首先他们都可以获取到标签内的值，不同的是前者只能获取文本内容，其次，二者也都可以赋值的，也就是我们经常用的”写内容”，我们经常用html()去拼接字符串，而text()是不能拼接的，还有本例中涉及到的方法还有show(),hide()以及css()等等，都是我们需要去熟练使用的