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: ...
随机推荐
- Mac 快速进入mysql命令行
1.终端输入进入bin 目录 cd /usr/local/mysql/bin/ 2.mysql登录,输入密码即可 ./mysql -uroot -p 前提:mysql 服务已启动
- flutter的加载弹框
代码组件: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'packa ...
- Qt编写自定义控件61-通用移动
一.前言 通用移动类,目标就是为了实现放入任意的控件以后,支持鼠标拖动,在容器中或者父类中拖动,这个应用场景非常多,比如在地图上放置的设备,需要用户自行按下拖动到指定的合适的位置,然后保存设备的位置坐 ...
- 转 mysql 文件系统空间满了
#######################sample [OIP - 互联网开放平台]在2019-07-28 21:30:11发生10.194.42.19 - - Linux上的监控项[磁盘空间] ...
- 搭建iscsi存储系统（一）
(1).DAS.SAN.NAS三种存储方式 参考:https://blog.csdn.net/qq_23348071/article/details/73963407 DAS全称Direct-Atta ...
- 【redis】 windows 32x 64x
下载地址:http://files.cnblogs.com/files/dtdxrk/redis_win.zip
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识1
什么是REST REST 是 Representational State Transfer 的缩写. 它是一种架构的风格, 这种风格基于一套预定义的规则, 这些规则描述了网络资源是如何定义和寻址的. ...
- js 常用操作 -- 持续更新
替换数组中某一元素: array.splice(2, 1, '哈哈'); // 2 表示指定数组中2下标元素,1表示要删除的项数,哈哈 是替换后的值 在数组中某元素之前增加元素: array.spli ...
- poj3348（求凸包面积）
题目链接:https://vjudge.net/problem/POJ-3348 题意:转换题意后即是求凸包的面积. 思路: 套模板,求凸包面积即转换为多个三角形面积之和,用叉积求,然后除2,因为本题 ...