vue实现百度搜索下拉提示功能
这段代码用到vuejs和vue-resouece。实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
myData: [],
tt: '',
now: -1
},
methods: {
get: function(e) { // 请求限制 按了上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
return
}
// enter跳转
if (e.keyCode === 13) {
window.open('https://www.baidu.com/s?wd=' + this.tt);
this.tt = '';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
wd: this.tt
}, {
jsonp: 'cb'
}).then(function(res) {
// 请求成功
this.myData = res.data.s;
this.now = -1;
}, function(res) {
// 请求失败
console.log(res.status)
})
},
changeDown: function() {
this.now++;
// 到了最后一个选项
if (this.now === this.myData.length) {
this.now = -1;
}
this.tt = this.myData[this.now]
},
changeUp: function() {
this.now--;
// 到了第一个选项
if (this.now === -2) {
this.now = this.myData.length - 1;
}
this.tt = this.myData[this.now] }
}
})
}
</script>
<style type="text/css">
.gray {
background: gray
}
</style>
</head> <body>
<!-- 百度下拉接口 -->
<div id="box">
<input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">
<ul>
<li v-for="(item, index) in myData" :class="{gray:index===now}">{{item}}</li>
</ul>
</div>
</body> </html>
效果图：
这个ajax请求没有做节流，很多时候需要限制ajax频繁请求，可以小改一下：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
myData: [],
tt: '',
now: -1
},
methods: {
get: function(e) { // 请求限制 按了上下箭头
if (e.keyCode === 38 || e.keyCode === 40) {
return
}
// enter跳转
if (e.keyCode === 13) {
window.open('https://www.baidu.com/s?wd=' + this.tt);
this.tt = '';
}
// 限制频繁请求
this.throttle(this.getData,window)
},
changeDown: function() {
this.now++;
// 到了最后一个选项
if (this.now === this.myData.length) {
this.now = -1;
}
this.tt = this.myData[this.now]
},
changeUp: function() {
this.now--;
// 到了第一个选项
if (this.now === -2) {
this.now = this.myData.length - 1;
}
this.tt = this.myData[this.now] },
// 把请求单独拿出来
getData() {
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
wd: this.tt
}, {
jsonp: 'cb'
}).then(function(res) {
// 请求成功
this.myData = res.data.s;
this.now = -1;
}, function(res) {
// 请求失败
console.log(res.status)
})
},
// 节流函数
throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},300);
}
}
})
}
</script>
<style type="text/css">
.gray {
background: gray
}
</style>
</head> <body>
<!-- 百度下拉接口 -->
<div id="box">
<input type="text" v-model="tt" name="" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()">
<ul>
<li v-for="(item, index) in myData" :class="{gray:index===now}">{{item}}</li>
</ul>
</div>
</body> </html>
vue实现百度搜索下拉提示功能的更多相关文章
- Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
- z-blog博客组插件openSug.js百度搜索下拉框提示代码
z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...
- jquery 仿百度搜索下拉框的插件
转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...
- 利用 lucene.net 实现高效率的 WildcardQuery ，记一次类似百度搜索下拉关键字联想功能的实现。
打开百度输入 站内搜索也要实现类似功能.最基础的做法,写个方法查数据库搜索历史综合表keywordSearch(先将被搜索过的关键字记录到一张表,记录好他们被搜索的次数.上次搜索的有多少结果) 大概 ...
- JavaScript--模拟百度搜索下拉li
上效果: 主要思路: 函数indexOf() .join().innerHTML的使用,还有 用完的数组要清空 <!DOCTYPE html> <html> <head ...
- angular的跨域（angular百度下拉提示模拟）和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- Xamarin. Android实现下拉刷新功能
PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
随机推荐
- Jackson 处理复杂类型(List,map)两种方法
http://blog.csdn.net/zhuyijian135757/article/details/38269715 —————————————————————————————————————— ...
- 图示 Smart-Art
在PPT中,图示有两个作用,一是将对象间的逻辑关系视觉化,使文字承载的信息一目了然; 二是打破呆板的页面版式,让枯燥的文本变得更有魅力. 比较聪明的办法是在Sma吨Art生成图形的基础上继续编辑,使其 ...
- C# Notes
Token Based Authentication Attributes Tutorial - Conditional - Obsolete Covariance and Contravarianc ...
- find & grep 命令 in linux（转）
Linux下面工作,有些命令能够大大提高效率.本文就向大家介绍find.grep命令,他哥俩可以算是必会的linux命令,我几乎每天都要用到他们.本文结构如下: -exec,find命令对匹配的文件执 ...
- vnc viewer on Ubuntu
我使用的是putty和SSL/SSH Vnc Viewer.因为刚入坑,也希望小白们能少走弯路,所以本贴写得比较细. 先说说vnc server和 vnc viewer的区别:server用于服务器, ...
- thinkphp 对百度编辑器里的内容进行保存
模板代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="U ...
- 关于Unity中的光照(七)
全局光照 GI 这里所说的反射就是,一个红色的物体,当太阳照射它的时候,它周围的物体也会变得有点红. 1:Realtime每帧都会计算光照,实时光照是不会反射的,所以它的光影显得单调;2:Baked ...
- if 结构和三目运算和switch语句
if语句需要注意的地方: if判断只能接一个语句,存在多个语句时,用块语句表示{},若在if判断后 直接加“:”相当于if判断后加一个空语句,即使条件成立什么也不会干! 1. if的第一种形态(真假) ...
- 关于”nodejs基于事件驱动”的思考
刚想通是怎么回事. 以页面上的js为例,你可以给多个标签注册事件回调,然而,无论给 多少个标签 注册 多少个事件回调,这些回调都只会等待自己命中注定的那个事件,在执行上都不会彼此影响!!! 再想一下w ...
- 信噪比——信号加噪相关的知识
信噪比:即Signal noise ratio , 即SNR: 它的单位为 dB, 公式为: SNR = 10lg(PS / PN), 其中 ps 表示信号的有效功率, pn 表示噪声的有效功率: 如 ...