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

梦里梦外; 2022-05-16 01:21 199阅读 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>

3.总结:此例在此只分析下拉框的显示，下篇文章我们来分析我们在这里可能遇到的bug以及其他功能的实现;