最终效果（chrome 下）：
今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果。
1、html 以及 css 部分
首先你得要有个输入框，这里我用了 &input type='text' /& 控件，其次当用户在输入框中输入内容后，下拉效果随即出现，比如在我的代码中最多会出现 10 个联想词，那么就得写 10 个 div（来显示这些词），这里我用了 table 元素，这里注意 table 中的 td 元素还得有个 hover 后变色的效果。html 和 css 部分相对来说还是比较简单的，直接看代码。
html 部分：
&input type='text' id='txt' /&
&table cellpadding='2' cellspacing='0'&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
&tr&&td&&/td&&/tr&
height: 24
width: 535
font-size: 20
font-family: '微软雅黑', '宋体', '黑体';
background-color: rgb(249,252,255);
height: 24
width: 535
td:hover {
background-color: rgb(168,213,252);
2、Javascript 部分之数据的获取
很显然，demo 的核心是数据的获取，也就是说当用户输入一些词汇的时候，你怎么去找到那些联想词。在之前，我一直以为百度首页是用 ajax 去调用接口的，其实不然，原来是 jsonp。其实也很好理解，很多网址导航网站或者个人网站都有百度搜索，如果是用 ajax 去调用的，除非设置了 CORS，否则根据同源策略就取不到数据了嘛！所以 jsonp 还是个很好的办法。
我们可以打开
的首页，调出 chrome 下的 network 面板，在网页的百度搜索框处随便输入一些字符（比如s），这时就会在 network 面板下发现一些 http 请求，其中我们要的就是以下这个了：
看该请求的 url，很明显是个 jsonp 获取数据的格式，cb 后面跟着的就是 callback 的函数名嘛，你也可以把这个 url 在浏览器中打开，返回的是一个包裹着 json 数据的函数执行。
既然2345网址导航能用百度的接口，当然我们自己写的网页也可以啦。我们可以动态插入一个 script 标签，然后把 src 属性指向该接口的 url（url中需要约定一个回调函数的函数名），然后再写个函数来处理数据，比如这样：
var s = document.createElement('script');
s.src = '/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 =
// delete scripts
var s = document.querySelectorAll('script');
for (var i = 1, len = s. i & i++) {
document.body.removeChild(s[i]);
注意执行完 fn 函数后，也就是说我们已经处理完了得到的数据（数据已经展示在了 table 中），那么就可以把这个动态插入的脚本删掉了（delete scripts）。
3、Javascript 部分之其他逻辑处理
解决了这个最重要的环节，其他的就是一些细节问题了。
比如说这里我是监听了输入框的 keyup 事件；比如在编码的过程中要用 encodeURI() 函数；在获取输入框内容的时候我用了 trim() 函数；点击联想词会打开新页面，这里我用了事件委托；在输入框内输入后出现联想词，然后点击空白区域，联想词就会消失。都是一些很细节的东西。
其实做出效果并不难，个人觉得 demo 的难度是要兼容，特别是兼容 ie6 这样坑爹的浏览器，一些高级 api 不能用，甚至连 hover 都不支持。所以这只是上篇，给出一个具体的思路，而下篇则会进行兼容性的修改，代码会大换血的感觉。
源码参考：
本来是打算另起一篇讲讲兼容性的，但是觉得没有必要也不浪费篇目了。
兼容代码效果预览：
源代码可以参考：
其实要做到兼容性，做到如下几条即可。
querySelector() 以及 querySelectorAll() 的替换，很显然这两个 api 是 h5 的，所以得替换成 getElementById() 和 getElementsByTagName()
事件监听部分 IE 和 其他浏览器分别实现各自的监听，详细可以参考源码
e 和 window.e 以及 target 和 srcElement
trim() trim()函数是ES5的内容，低版本浏览器不见得都支持，可以在 String 上写个扩展方法
hover 坑爹的 IE6 连 hover 都不支持，这里我参考了
依然存在的问题: 虽然效果可以出来了，但是依然存在两个问题。
delete scripts 部分 因为调用的是 jsonp 的接口，所以动态生成 script 标签后，在取完数据后最好能 remove 掉生成的标签，但是不知道为什么 ie6 下 delete scripts 部分报错（源码 123~129 部分）
编码 用utf-8 编码的话，ie6下报错，我猜想可能是运行到 encodeURI() 函数时出错了（源码 106行），但是为什么目前我也不清楚，换成 gb2312 却可以,但是 title 的中文却乱码了（本地却没有），暂时对编码还不了解，先这样吧。
暂时先这样吧，以后弄明白了再补充吧。
今天把源码又优化了下，table 元素自动生成，这样不用写死 10 个 tr（td）元素了。代码放在
随笔 - 238
评论 - 894
Trackbacks - 0插件描述：仿百度自动补全搜索框效果
模仿百度搜索框或者商城类搜索框输入文字自动补全效果，同时方向键可以控制选择匹配列表中的一项，全部效果根据个人项目完善，此文件只是模拟出自动补全效果，不足之处请多多指教！
相关插件-自动完成
讨论这个项目（32）回答他人问题或分享插件使用方法奖励jQ币
我是程序员 0
不知道怎么下载
没见过的海S 0
和其他控件冲突，easyui grid冲突
如果我项目中已经引入了jquery，但是会和你的自定义的$方法，冲突，有什么方法解决吗？？？
诗涵艺馨 0
有点急！可以帮忙看看嘛？我想动态的从数据库获取数据
诗涵艺馨 0
问，这个获取文本框的值是怎么获取的&body&
&div&align=&center&&style=&padding-top:50px&&
&input&type=&text&&style=&width:300height:20font-size:14&&placeholder=&请输入a或b模拟效果&
id=&o&&onkeyup=&autoComplete.start(event)&&/&
&div&class=&auto_hidden&&id=&auto&&
&!--自动完成&DIV--&
//在这里我需要知道你是怎么动态获取文本的值？&&&
var&dataf&=&[];
url:&&../sousuo/sousuo.aspx/comp&,
type:&&POST&,
dataType:&&json&,
data:&&{&'companyname':&'&&+&targetVal&+&&'&}&,
contentType:&&application/&charset=utf-8&,
//该属性表示前台请求到的数据为返回json数据格式的方法&&&&&&&&
async:&false,
success:&function(data)&{
dataf&=&eval(data.d);
//数组&&&&&&&&&&
alert(dataf);
var&autoComplete&=&new&AutoComplete('o',&'auto',&[dataf]);
伴我久Xin 0
springmvc框架怎么用啊
在IOS上输入的时候不会自动补全，但是删除一个字的时候会自动补全，求助
如果你在手机上使用的话，可以直接用jQuery.UI插件，自带自动补全方法，autocomplete
大神，这个搜索在IOS上不好使，有什么方法解决吗
大神，还是把js剥离出来的问题，能不能帮忙！
你把页面的js，拷贝出来，单独放一个js文件里，然后页面引入那个js文件就可以了
空城天路客0
很多浏览器都是自带的
hansen1160 0
大神，怎么把js 剥离出来，能不能剥离
看到你留言晚了，不知道你解决了没？没解决我帮你
PROMULGATOR
北京市世纪互联数据中心
关注作者 (79)
收藏此插件 (107)
我当前jQ币余额：正在获取..
已下载次数：4117
所需jQ币：0Mac上的Safari,最近很多网页打不开，比如说所有的百度搜索结果，打开都只是显示一个问号。-百度搜索出的网页全都打不开 _星空生活网
你现在浏览的是： & > &
Mac上的Safari,最近很多网页打不开，比如说所有的百度搜索结果，打开都只是显示一个问号。
Mac上的Safari,最近很多网页打不开，比如说所有的百度搜索结果，打开都只是显示一个问号。
重新设置了DNS,没用。把javascript关了，能打开那些搜索结果，但很多界面都不能显示了。Chrome上一切正常，但是感觉速度比safari慢。
关闭手机或者苹果设备的wifi再打开了、如果不行的话---设置--wifi一点击你的无线路由一选择忽视此网络一退回一重新查找wifi一输入wifi密码、不要用网络还原。　　2，清除一个就好了，就是dsn服务器的问题；　　3。不行的话，用笔记本上wifi肯定没问题吧，点开链接看笔记本的DNS首选服务器是多少! 4、不要去调无线路由，那样会清除所有的Wifi记录，回到某个Wifi环境时都会重新输入密码一麻烦1　　6!不是它的问题；是手机上过太多的wifi。　　5。 DNS设置设成61.139.2.69试试Safari打不开网页，因为服务器已停止响应可尝试一下方法解决：1、最简单的解决方法就是重新刷新一下，如果刷新都解决不了问题的话请参考以下方法来解决、看看能不能上QQ，如果能上qq的话。然后将苹果设备的DNS服务器和笔记本的DNS服务器设置成一个。　　7、设置路径
safari系统偏好设置__高级__默认编码更改为unicode
然后Safari菜单中就多了一个开发的选项是兼容性的问题，打开Safari偏好设置，总有一款适合你，高级项最下面有个在菜单中显示开发菜单，打勾，开发下拉有个用户代理，切换一下看看
最近safari总是自动蹦出奇奇怪怪的网页,怎么解决,求大神解答 ：
Safari的话装一个adblock去广告的就行了,找不着哪能下adb的话问度娘
Mac上的Safari,最近很多网页打不开,比如说所有的百度搜索结果,打开都只是显示一个问号。 ：
safari系统偏好设置__高级__默认编码更改为unicode
苹果safari怎么删除最近浏览记录 ：
打开iPhone手机进入【设置】功能页面。 接着我们在设置里面找到Safari功能直接进入。 进入之...
最近Safari遇到问题了,不知道怎么解决 ：
应该是safari的服务器问题或者是网络不好吧 换夸克浏览器试试,夸克浏览器挺简洁的,打开网页的速度...
如何去除MacBook Safari最常访问的网站? ：
为什么Mac的saferi上网速度变慢 求高人指点 ：
最近Safari上网的速度很慢特别是用风行看电视剧的时候,为什么呢 有什么办法吗...好麻烦,我的电...
最近5的Safari浏览器打开某个网页时老被篡改谁知道 ：
你用的是Mac操作系统吗?要是win的话很难回答,看看有没有什么软件可以阻止,要是Mac系统的话可以...
为什么safari最近经常自动退出 ：
左边是spotlight界面,只有你输入的内容在本地没有记录才会出现你指的两个选项,一个是用默认的搜...
求帮助啊!最近手机safari搜索直接跳转百度怎么回事?怎么解决好恶心啊! ：
1.设置——safari——预载入最常点选 ——关闭 2.设置——safari——清除历史记录网站数...
你可能感兴趣的内容？>> 百度搜索引擎的技巧
百度搜索引擎的技巧[]
全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。
如何在百度准确快速搜索到自己想要找的东西，有以下几种搜索方法：
1.关键字检索在百度主页的检索栏内输入关键字串，单击&检索&按钮即可。
2.相关搜索百度的&相关搜索&，就是和您的搜索很相似的一系列查询词。
3.使用&＋&和&－&进行限制性检索当我们需要检索结果中包含有两个或两个以上的内容，这时我们可以把几个条件之间用&＋&号连接。这样关键字串一定要出现在结果中，例如想查询那英的歌曲《征服》，你可以输入&那英＋征服&。
如果您发现搜索结果中，有某一类网页是您不希望看见的，而且，这些网页都包含特定的关键词，那么用减号语法，就可以去除所有这些含有特定关键词的网页。4.使用双引号（&&）进行词组检索利用双引号查询完全符合关键字串的网站。例如：输入&中国女足&找出包含&中国女足&的网站，而不会找出包含&中国男足&的网站。
5.仅搜索网站标题在关键字前加&t:&，搜索引擎仅查询网站的名称。例如在网站搜索框中输入&t:网络技术&，单击&搜索&按钮，符合搜索条件的网站标题显示出来。
6.仅搜索网站的网址在关键字前加&u:&，搜索引擎仅会查询网址，例如在网页中的搜索框中输入&u：&，单击&搜索&按钮，则统一资源定位器中包含&&字符的网址全部显示出来。
7.货币换算要使用百度的内置货币换算器，只需在百度网页搜索框中键入您需要完成的货币转换，单击&回车&键或点击&百度一下&按钮即可。
8.错别字提示由于汉字输入法的局限性，我们在搜索时经常会输入一些错别字，导致搜索结果不佳。别担心，百度会给出错别字纠正提示。错别字提示显示在搜索结果上方。
9. 拼音提示如果只知道某个词的发音，却不知道怎么写，只要您输入查询词的汉语拼音，百度就能把最符合要求的对应汉字提示出来。它事实上是一个无比强大的拼音输入法。 拼音提示显示在搜索结果上方。
10.搜索框提示百度会根据您的输入内容，在搜索框下方实时展示最符合的提示词。您输入拼音或汉字，百度会给出最符合您要求的提示。默认情况下，在百度主页和搜索结果页上方的搜索框都会显示搜索框提示。显示搜索框提示时，会默认屏蔽您浏览器的搜索框历史提示功能。
11.计算器和度量衡转换您只需简单的在搜索框内输入计算式，回车即可。
12. 英汉互译词典百度网页搜索内嵌英汉互译词典功能。如果您想查询英文单词或词组的解释，您可以在搜索框中输入想查询的&英文单词或词组&+&是什么意思&，搜索结果第一条就是英汉词典的解释，如，count是什么意思；如果您想查询某个汉字或词语的英文翻译，您可以在搜索框中输入想查询的&汉字或词语&+&的英语&，搜索结果第一条就是汉英词典的解释。
13.股票、列车时刻表和飞机航班查询在百度搜索框中输入股票代码、列车车次或者飞机航班号，您就能直接获得相关信息。例如，输入深发展的股票代码&000001&，搜索结果上方，显示深发展的股票实时行情。
14.天气查询在百度搜索框中输入您要查询的城市名称加上天气这个词,您就能获得该城市当天的天气情况。例如,搜索&北京天气&，就可以在搜索结果上面看到北京今天的天气情况。
15.专业文档搜索百度支持对Office文档（包括Word、Excel、Powoint）、Adobe PDF文档、RTF文档进行了全文搜索。要搜索这类文档，很简单，在普通的查询词后面，加一个&filetype：&文档类型限定。&Filetype:&后可以跟以下文件格式：DOC、XLS、PPT、PDF、RTF、ALL。其中，ALL表示搜索所有这些文件类型。例如，查找张五常关于交易费用方面的经济学论文。&交易费用 张五常 filetype:doc&，点击结果标题，直接下载该文档，也可以点击标题后的&HTML版&快速查看该文档的网页格式内容。
16.高级搜索和个性设置如果对百度各种查询语法不熟悉，可以使用百度集成的高级搜索界面，可以方便的做各种搜索查询。
17.高级搜索语法
把搜索范围限定在网页标题中&&intitle
网页标题通常是对网页内容提纲挈领式的归纳。把查询内容范围限定在网页标题中，有时能获得良好的效果。使用的方式，是把查询内容中，特别关键的部分，用&intitle:&领起来。例如，找林青霞的写真，就可以这样查询：写真 intitle:林青霞注意，intitle:和后面的关键词之间，不要有空格。
把搜索范围限定在特定站点中&&site
有时候，您如果知道某个站点中有自己需要找的东西，就可以把搜索范围限定在这个站点中，提高查询效率。使用的方式，是在查询内容的后面，加上&site:站点域名&。例如，天空网下载软件不错，就可以这样查询：msn 注意，&site:&后面跟的站点域名，不要带&http://&；另外，site:和站点名之间，不要带空格。
把搜索范围限定在url链接中&&inurl
网页url中的某些信息，常常有某种有价值的含义。于是，您如果对搜索结果的url做某种限定，就可以获得良好的效果。实现的方式，是用&inurl:&，后跟需要在url中出现的关键词。例如，找关于photoshop的使用技巧，可以这样查询：photoshop inurl:jiqiao上面这个查询串中的&photoshop&，是可以出现在网页的任何位置，而&jiqiao&则必须出现在网页url中。注意，inurl:语法和后面所跟的关键词，不要有空格。
精确匹配&&双引号和书名号
如果输入的查询词很长，百度在经过分析后，给出的搜索结果中的查询词，可能是拆分的。如果您对这种情况不满意，可以尝试让百度不拆分查询词。给查询词加上双引号，就可以达到这种效果。例如，搜索 上海科技大学 ，如果不加双引号，搜索结果被拆分，效果不是很好，但加上双引号后，&上海科技大学&，获得的结果就全是符合要求的了。
书名号是百度独有的一个特殊查询语法。在其他搜索引擎中，书名号会被忽略，而在百度，中文书名号是可被查询的。加上书名号的查询词，有两层特殊功能，一是书名号会出现在搜索结果中；二是被书名号扩起来的内容，不会被拆分。 书名号在某些情况下特别有效果，例如，查名字很通俗和常用的那些电影或者小说。比如，查电影&手机&，如果不加书名号，很多情况下出来的是通讯工具&&手机，而加上书名号后，《手机》结果就都是关于电影方面的了。
参考资料： 百度百科、百度经验、必应词典、观点
扩展阅读： /jopong
相关词条：
合作编辑：
网络营销词典内容均由网友提供，仅供参考。如发现词条内容有问题，请发邮件至info # 。
浏览次数：1238
编辑次数：0
最近更新： 16:04:28
词条分类导航
最受关注词条