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: ...
随机推荐
- ratingBar 星级评分条
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Z-Score数据标准化（转载）
简介Z-Score标准化是数据处理的一种常用方法.通过它能够将不同量级的数据转化为统一量度的Z-Score分值进行比较. 一句话解释版本: Z-Score通过(x-μ)/σ将两组或多组数据转化为无单位 ...
- FastDFSClient工具类
import org.csource.common.NameValuePair;import org.csource.fastdfs.ClientGlobal;import org.csource.f ...
- Qt编写自定义控件61-通用移动
一.前言 通用移动类,目标就是为了实现放入任意的控件以后,支持鼠标拖动,在容器中或者父类中拖动,这个应用场景非常多,比如在地图上放置的设备,需要用户自行按下拖动到指定的合适的位置,然后保存设备的位置坐 ...
- DECODE函数和CASE WHEN 比较
http://blog.csdn.net/zhangbingtao2011/article/details/51384393 一,DECODE函数 其基本语法为: DECODE(value, if1, ...
- Nginx配置文件的反向代理
问题描述:项目需要预览pdf,前端控件支持的格式是http://192.168.0.1/pdf/a.pdf 是这样的,然后我就想给路径配个nginx反向代理就好了,但是配置的时候出问题了. 1.正确 ...
- k8s调度器之亲和性和反亲和性/节点选择器
容器在节点(物理机)上是如何部署的 是由调度器scheduler进行调度的 调度策略 随机 通过节点选择器选择某些节点 通过节点亲和性和pod的亲和性及反亲和性实现更细粒度的控制 参考 https:/ ...
- PDO 查询mysql返回字段int变为String型解决方法
PDO 查询mysql返回字段int变为String型解决方法使用PDO查询mysql数据库时,执行prepare,execute后,返回的字段数据全都变为字符型. 例如id在数据库中是Int的,查询 ...
- mysql 基本操作及对用户操作
1.登录/退出基本操作 登录:mysql [-h服务器地址] -u登录名 -P端口号 -p 或登录:mysql [--host=服务器地址] --user ...
- CentOS7 Python3下安装 TensorToolbox 1.0.22时的一些错误及解决办法
CentOS7 Python3下安装 TensorToolbox 1.0.22 (python3) [jiangshan@localhost ~]$ pip install TensorToolbox ...