仿百度搜索显示下拉框（一）-蒲公英云

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

梦里梦外; 2022-05-16 01:21 358阅读 0赞

# 最近在写一个旅游网站的小案例，其中的一个功能：搜索同时显示下拉框

本文所用的知识主要有：JQuery语法，ajax异步加载，ssh框架；

1:逻辑分析：
事件分析：在输入框中输入值后，下拉框即显示，根据异步加载得到的信息，将数据显示在下拉框中，此事件为获得焦点元素事件(此事件我也有点模糊)keyup事件；
后台技术分析：获得到文本框的输入值name后，我们通过ajax技术，异步去数据库查询数据，这里我们一般使用模糊查询like，只要包含该name的数据我们都查询作为结果，但是需要注意的是，由于下拉框大小有限，数据量一般用limit条件查询限制显示的数量；
前台技术分析：从后台拿到数据后，我们要让隐藏的div显示，涉及到show()以及hide()方法，在显示div的同时我们要将数据写入到表格中
2:代码展示：

//异步加载下拉框
$(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", "beige");
               });
        $("tr").bind("mouseout", function() { 
        $(this).css("background-color", "#ffffff");
              });
        //单击某行跳转到详细页面
        $("tr").bind("click", function() { 
        location.href = "/findRouteClick?rname=" + $(this).find("td").text();
             });
        } ,"json");
        } else {
        $("#dtn").hide();
        }
    });
});
//html页面代码
<div class="search">
<input name="serach_input" type="text" id="search" placeholder="请输入路线名称" class="search_input" autocomplete="off"> <a class="search-button" href="#">搜索</a> <div id="dtn"style="display:none;background-color:white;; position: absolute; left: 483px; top: 232.5px; width: 410px; height: 300px; border: 1px solid gray;"> </div>