html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果(上)
最终效果(chrome 下): 搜索框下拉 demo
今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果。
1、html 以及 css 部分
首先你得要有个输入框,这里我用了 控件,其次当用户在输入框中输入内容后,下拉效果随即出现,比如在我的代码中最多会出现 10 个联想词,那么就得写 10 个 div(来显示这些词),这里我用了 table 元素,这里注意 table 中的 td 元素还得有个 hover 后变色的效果。html 和 css 部分相对来说还是比较简单的,直接看代码。
html 部分:
td>tr> |
td>tr> |
td>tr> |
td>tr> |
td>tr> |
td>tr> |
td>tr> |
td>tr> |
td>tr> |
td>tr>
tbody> table> css 部分: height:24px; width:535px; font-size:20px; } table { font-family:'微软雅黑', '宋体', '黑体'; } td { background-color:rgb(249,252,255); height:24px; width:535px; } td:hover { background-color: rgb(168,213,252); cursor:default; }style> 2、Javascript 部分之数据的获取 很显然,demo 的核心是数据的获取,也就是说当用户输入一些词汇的时候,你怎么去找到那些联想词。在之前,我一直以为百度首页是用 ajax 去调用接口的,其实不然,原来是 jsonp。其实也很好理解,很多网址导航网站或者个人网站都有百度搜索,如果是用 ajax 去调用的,除非设置了 CORS,否则根据同源策略就取不到数据了嘛!所以 jsonp 还是个很好的办法。 我们可以打开 2345网址导航 的首页,调出 chrome 下的 network 面板,在网页的百度搜索框处随便输入一些字符(比如s),这时就会在 network 面板下发现一些 http 请求,其中我们要的就是以下这个了: 看该请求的 url,很明显是个 jsonp 获取数据的格式,cb 后面跟着的就是 callback 的函数名嘛,你也可以把这个 url 在浏览器中打开,返回的是一个包裹着 json 数据的函数执行。 既然2345网址导航能用百度的接口,当然我们自己写的网页也可以啦。我们可以动态插入一个 script 标签,然后把 src 属性指向该接口的 url(url中需要约定一个回调函数的函数名),然后再写个函数来处理数据,比如这样: var s = document.createElement('script'); s.src = 'http://unionsug.baidu.com/su?wd=' + encodeURI(this.value.trim()) + '&p=3&cb=fn'; document.body.appendChild(s); function fn(data){ var tds = document.querySelectorAll('td'); data.s.forEach(function(item, index){ tds[index].style.display = ''; tds[index].innerHTML = item; }); // delete scripts var s = document.querySelectorAll('script'); for (var i = 1, len = s.length; i < len; i++) { document.body.removeChild(s[i]); } } 注意执行完 fn 函数后,也就是说我们已经处理完了得到的数据(数据已经展示在了 table 中),那么就可以把这个动态插入的脚本删掉了(delete scripts)。 3、Javascript 部分之其他逻辑处理 解决了这个最重要的环节,其他的就是一些细节问题了。 比如说这里我是监听了输入框的 keyup 事件;比如在编码的过程中要用 encodeURI() 函数;在获取输入框内容的时候我用了 trim() 函数;点击联想词会打开新页面,这里我用了事件委托;在输入框内输入后出现联想词,然后点击空白区域,联想词就会消失。都是一些很细节的东西。 4、总结 其实做出效果并不难,个人觉得 demo 的难度是要兼容,特别是兼容 ie6 这样坑爹的浏览器,一些高级 api 不能用,甚至连 hover 都不支持。所以这只是上篇,给出一个具体的思路,而下篇则会进行兼容性的修改,代码会大换血的感觉。 源码参考:搜索框下拉 demo 源码 |
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果(上)相关推荐
- AJAX实例--根据邮政编号动态获取省,市,县三级地区+仿百度搜索下拉提示
最近一段时间自己一直在学习AJAX,忽然顿悟ajax的强大功能,实在让人吃惊.在接下来的几篇博客里,我将分享在学习过程中,自己写的一些小例子,欢迎大家一起交流学习...欢迎各位拍砖..你的关注是我不断 ...
- 仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本 时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题 百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
- html 仿百度百科导航下拉菜单
演示图1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- html+js仿百度搜索框,点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索 代码 <!DOCTYPE html> <html lang="en"> <head>< ...
- ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法 2.this.$http.post()方法 3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==&g ...
- php+ajax 仿百度搜索效果
php+ajax 仿百度搜索效果(代码csdn下载地址:http://download.csdn.net/detail/aa1049372051/7338675) 一共有四个文件 1.前台页面 in ...
- php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码 页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
- 用jq实现仿百度搜索框
百度搜索框看似简单,但是涉及到了数据交互,如果能用vue来实现的话会简单很多,现在用jq模仿了一下,写的代码不是一般的多啊! 当然头部要引入jq了 html部分 <input type=&quo ...
最新文章
- wp———跳转系统设置页面的wifi、网络连接、蓝牙、飞行模式等
- python-yield-生成器--的作用
- 【模型开发】EDA探索性分析
- 视觉盛宴篇!推荐 12 个好用的 CSS 的开源项目,YYDS !
- 织入业务代码-LogAspect
- 【vue2.0进阶】用axios来实现数据请求,简单易用
- 洛谷 P1074 靶形数独 Label:search 不会
- Dijkstra算法的C语言程序
- 百度网盘青春版未推出前,使用这个网盘高速下载工具
- 通信信道带宽为1Gbit/s,端到端时延为10ms。TCP的发送窗口为65535字节。试问: 可能达到的最大吞吐量是多少?信道的利用率是多少?
- Java 求向量夹角,坐标旋转
- 思科服务器首页怎么修改,修改思科服务器cimc地址
- C++内存管理机制—Primitives笔记
- 消息模型与生成pdf
- postgresql常用命令和执行sql脚本
- ARM Neon 编程笔记一(ARM NEON Intrinsics, SIMD运算, 优化心得)
- HTTP各版本的特点(1.0/1.1/2.0/3.0)
- ElasticSearch之score打分机制原理
- 计算机故障诊断与失误,计算机系统故障诊断与维护常见故障及排除.ppt
- linux上安装libpng库以及zlib库