vue的jsonp百度下拉菜单
通过vue的jsonp实现百度下拉菜单的请求，vue的版本是2.9.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<style>
.gray {
background-color: #ccc;
}
</style>
<script>
window.onload = function () {
new Vue({
el: '#box',
data: {
myData: [], //搜索下拉数据列表
t1: '', //输入框里的值
now: -1 //输入框里面的值得索引，0位列表第一项
},
methods: {
get: function (ev) {
if(ev.keyCode==38 || ev.keyCode==40){ //当按照上下键的时候停止搜索
return
}
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1) //打开百度搜索
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: this.t1 // 输入的关键词
},
jsonp: 'cb' //callback函数的名称
}).then(function (res) {
this.myData=res.data.s;
console.log(this.myData)
}, function (err) {
console.log(err.status);
});
},
changeDown: function () { //向下选择
this.now++;
if (this.now == this.myData.length) { //判断是否超出列表长度
this.now = -1;
}
this.t1 = this.myData[this.now]; //改变输入框的值
},
changeUp: function () { //向上选择
this.now--;
if (this.now == -2) {
this.now = this.myData.length - 1;
}
this.t1 = this.myData[this.now];
},
dataLink: function (index) { //鼠标点击跳转
this.t1 = this.myData[index];
this.now = index;
window.open('https://www.baidu.com/s?wd=' + this.t1);
this.t1 = ''
}
}
})
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="(value,index) in myData" :class="{gray:index==now}">
{{ value }}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div> </body>
</html>
vue的jsonp百度下拉菜单的更多相关文章
- Vue.js模拟百度下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue实现百度下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 第一百四十六节，JavaScript，百度分享保持居中--下拉菜单
JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...
- vue实现隔行换色，下拉菜单控制隔行换色的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular的跨域（angular百度下拉提示模拟）和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- jQuery美化下拉菜单插件dropkick
dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...
- excel设置下拉菜单，并且不同值会显示不同颜色
工作中常常要用的excel,每次都会有新的需求,然后不会,然后百度,然后过段时间可能就又忘了,于是就想说,自己记录下来~~~因为自己用的都是2010,其实哪个版本都差不多,都是应该可以找到相应的按钮滴 ...
- bootstrap--组件之按钮式下拉菜单
把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 简单的实现如下 Code<div class="btn-group"& ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
随机推荐
- 【DataBase】Hsqldb的简单使用
介绍 HSQLDB是一个开放源代码的JAVA数据库,其具有标准的SQL语法和JAVA接口,它可以自由使用和分发,非常简洁和快速的.具有Server模式,每个程序需要不同的命令来运行. HyperSQL ...
- TestStandUI开发
安装完TestStand后,在左侧工具箱中 ,选择工具箱项,浏览,选择NationInstruments.TestStand.Interop.UI.AxControls.DLL .工具箱中选中 .NE ...
- Speech Recognition Java Code - HMM VQ MFCC ( Hidden markov model, Vector Quantization and Mel Filter Cepstral Coefficient)
Hi everyone,I have shared speech recognition code inhttps://github.com/gtiwari333/speech-recognition ...
- 带你进入异步Django+Vue的世界 - Didi打车实战
https://www.jianshu.com/p/7e5f2090555d#!/xh?tdsourcetag=s_pcqq_aiomsg
- 【C/C++开发】malloc，calloc和realloc的区别和注意事项
(1)C语言跟内存分配方式 <1>从静态存储区域分配. 内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量.static变量. <2&g ...
- Django 之memcached的应用
memcached介绍: memcached之前是danga的一个项目,最早是为LiveJournal服务的,当初设计师为了加速LiveJournal访问速度而开发的,后来被很多大型项目采用.官网是w ...
- context.xml文件配置
<?xml version='1.0' encoding='utf-8'?> <Context> <WatchedResource>WEB-INF/web.xml& ...
- 虚拟机中windows下制作超级隐藏账户
这篇博客非原创,我只是将很多大佬写的东西理解了一下写了出来. 接下来的实验最好在虚拟机进行,因为可以快照~ 制作隐藏用户可以说是两种方法但是基本操作一样,所以我们穿插着进行一种是隐藏账户,一种是影子账 ...
- Qt跨平台原理
Qt跨平台原理: 和java一样,针对每一种OS平台,QT都有一套对应的底层类库,而接口是完全一致的. 因此只要是在QT库上开发的程序,放在任何一种平台下都可以编译运行(前提条件是:程序中没有使用某O ...
- Nginx 系列教程
Nginx(一):Nginx介绍 Nginx(二):编译安装Nginx及参数说明 Nginx(三):nginx.conf配置文件说明 [1] 配置参数说明 Nginx(三):nginx.conf配置文 ...