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

不念不忘少年蓝@ 2022-05-16 05:13 193阅读 0赞

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

$(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()等等，都是我们需要去熟练使用的