怎么做百度搜索的下拉框？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么做百度搜索的下拉框？相关的知识，希望对你有一定的参考价值。
1、实现该功能需依赖jquery.js，jquery.autocomplete.js，先引入这两个js包，以及jquery.autocomplete.css样式文件，如图所示。
2、该不全插件要结合input元素使用，也就是在input中进行搜索时，会达到自动提示补全的效果，在html文件中定义input元素，以下是部分代码截图，如图所示。
3、那么使用autocomplete自动补全插件，也就非常简单了，下面下介绍一下最简单的使用方法，只要把要搜索的数据放进一个数组之中即可，
var language = [
"Chinese",
"English",
"Spanish",
"Russian",
"French",
"Japanese",
"Korean",
"German"
];
然后使用
$("#end").autocomplete(
source: [
language
]
);即可，代码如图所示。
4、下面可以看一下运行结果，比方说搜索带有C字的语言，如图所示。
5、下面看一下怎么和后台数据结合起来，可以与ajax一起使用，将ajax返回的数据作为上面的数组，直接赋给autocomplete插件使用，代码如图所示。
6、下面可以看一下真是的效果，可以看到，搜索“上”字之后，可以自动查询出数据库中所有带有上字的地址，这样下拉框便做出来了，如图所示。
李守洪排名大师
系统充值刷，很便宜的。出词率非常高，望采纳。 参考技术D 百度下拉框搜索作弊的原理其实就是模拟普通的搜索行为，修改每次搜索结果的参数，欺骗搜索引擎，只要知道了百度搜索参数的具体含义，自己也可以刷……
举例说明
百度 oq= original query 原有查询
谷歌 oq= 相当于百度oq=
搜狗 oq= 相当于百度oq=
解释 输入搜索词，输入了一半，此时选择了下拉框的相关搜索。这输入了一半的词就是 original query
百度 bs= before search 上一次搜索词
搜搜 bs= 等同百度bs
360搜索 pq= previous query 等同百度bs
解释 2到多次查询的上一次搜索词，伴随bs同时出现的必然有rsv_bp=1，是指2到多次搜索
百度 rsv_bp=
解释 判断是第几次搜索，常见的有2个值，0和1，默认为0
0 1次搜索
1 2到多次搜索
百度 f=
解释 搜索类型判断，常见的值
1 相关搜索
3 下拉框搜索
8 用户自主搜索
f=12 错别字提示正确搜索
百度 rsp= related search ?position
解释 下拉框相关搜索位置，从0开始，第n+1个相关搜索
譬如搜索“世纪佳缘”，选择下拉框第8个相关搜索"世纪佳缘交友网"，rsp=7
Jquery实现类似百度的搜索框
最近工作中需要做一个搜索框，类似百度的搜索框，需要达到两个功能：
1.输入关键字,展示匹配的下拉列表
2.选择匹配的项后查出相关内容
一般电商网站中也经常用到该搜索条，首先分析功能实现，输入关键字马上显示匹配项列表，实现该功能输入框需要绑定"input"事件，然后向后台发送异步请求，将数据展示在页面上。使用鼠标或上下键选择匹配项，点击搜索或"Enter"键后搜索具体结果。这里要用到两个异步请求，第一个请求匹配项，第二个请求搜索结果。键盘，鼠标以及输入框的事件都要监听到，还必须考虑到灵活性，也就是适应各种类似需求，想做好还是有一些难度的，下面分布进行实现。
一.html和css
<body> <div id="search-form"></div> </body>
<style type="text/css"> *{margin: 0;padding: 0;list-style:none;border:none;} body { font-family: "microsoft yahei" !important; background-color: #FDFFE0; } :focus { outline: none; } #search-form { position: relative; top: 50px; display: inline; } </style>
二.导入css和js文件
由于博客上传不了文件，可以去我的git:http://git.oschina.net/manliu.com/search_frame上有完整的项目文件
三.页面引用js
<script type="text/javascript"> var proposals = [‘百度1‘, ‘百度2‘, ‘百度3‘, ‘百度4‘, ‘百度5‘, ‘百度6‘, ‘百度7‘,‘17素材网‘,‘百度‘,‘新浪‘]; $(document).ready(function(){ $(‘#search-form‘).complete({ searchIn:function(val){//传入输入值，返回匹配值 /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/; return reg.test(val); */ var word = "^"+val+".*"; var rs = []; $.each(proposals,function(i,n){ if(n.match(word)){ rs.push(n); } }); return rs; }, width:400, height: 30, submitIn: function(text){//搜索选定的值 alert(text); } }); }); </script>
这里searchIn方法用于返回匹配项，通常在里面定义一个异步请求，向后台取数据，返回一个数组，对于复杂的还需要修改源码；submitIn用于搜索匹配的结果，一般可异步请求也可同步请求。
以上是关于怎么做百度搜索的下拉框？的主要内容，如果未能解决你的问题，请参考以下文章