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

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

本文所用的知识主要有：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以及其他功能的实现;

仿百度搜索显示下拉框（一）相关推荐

python搜索关键词自动提交订单_Python批量获取淘宝相关搜索和下拉框关键词
首先淘宝seo是什么?淘宝seo是对淘宝站内关键字排名进行优化,淘宝三大排名因数:文本相关性,商业因素,用户喜好度.非专业总结(勿喷) 1,文本相关性:起码标题出现吧 2,商业因素:广告展位,直通车等 ...
解决在 IntelliJ IDEA 中，输入代码时突然不会自动显示下拉框提示
解决在 IntelliJ IDEA 中,输入代码时突然不会自动显示下拉框提示笔者的运行环境: IntelliJ IDEA 2020.1.2 (Ultimate Edition) JDK 13.0.2 ...
如何通过百度搜索的下拉词和相关搜索找长尾关键词？
平时我们在写文章的时候会围绕某个关键词来写文章,特别是通过百度等搜索引擎的下拉词和相关搜索功能来找该关键词的长尾关键词,然后围绕长尾关键词来写文章,所以今天我们就以百度搜索为例说一下如何通过百度搜索的 ...
html 仿百度百科导航下拉菜单
演示图1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
野田SEO工具箱：集文章伪原创、百度网址URL下拉框采集、指数、权重、收录批量查询功能
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
诺诺SEO软件包：集文章伪原创、百度网址URL下拉框采集、指数、权重、收录批量查询功能
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
小佳SEO软件包：集百度网址URL下拉框采集、指数、权重、收录批量查询、文章伪原创一体
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
用Bootstrap实现搜索select下拉框：bootstrap-select
实现bootstrap搜索下拉框,本文采用bootstrap-select插件:bootstrap-select插件依赖jquery1.8+和bootstrap, 所以需要先引入jquery和boot ...
html中关于下拉框的2中设置方法（移入显示下拉框）
第一种方式(设置高度的不同来实现) 首先我们设置一个盒子来装我们的下拉框和内容 <div class="box1">小米 <div class="xia ...

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

仿百度搜索显示下拉框（一）相关推荐

最新文章

热门文章