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: ...
随机推荐
- nginx中的超时配置
nginx.conf配置文件中timeout超时时间设置 client_header_timeout 语法 client_header_timeout time默认值 60s上下文 http serv ...
- Docs-.NET-C#-指南-语言参考-关键字-值类型：struct
ylbtech-Docs-.NET-C#-指南-语言参考-关键字-值类型:struct 1.返回顶部 1. struct(C# 参考) 2015/07/20 struct 类型是一种值类型,通常用来封 ...
- 多线程查询数据，将结果存入到redis中，最后批量从redis中取数据批量插入数据库中【我】
多线程查询数据,将结果存入到redis中,最后批量从redis中取数据批量插入数据库中 package com.xxx.xx.reve.service; import java.util.ArrayL ...
- osg编译日志3
1>------ 已启动生成: 项目: ZERO_CHECK, 配置: Debug x64 ------1> Checking Build System1> CMake does n ...
- 报错：Configured broker.id 68 doesn't match stored broker.id 113 in meta.properties
报错背景: CDH中安装完成kafka的组件后不能成功启动,发现UI界面中的broker.id和服务器中的broker.id不一致, 因此更改了服务器中broker.id 但是更改完成之后还是报错. ...
- window下安装docker
下载docker toolbox https://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 1,.双击安装DockerTool ...
- Vue个人笔记
目录 前言 Vue的插值表达式怎么保留小数位 表格列被挤,位置很小 v-if多个条件 前言 此笔记仅仅记录我在使用过程中遇到的一些问题,不定期更新 Vue的插值表达式怎么保留小数位 插值表达式其实都是 ...
- @media 适配兼容
/* 兼容iphone4/4s */ @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } /* 兼容iphon ...
- Ubuntu18使用netplan设置多网口绑定
Ubuntu18使用netplan设置网络参考:https://www.cnblogs.com/minseo/p/11325384.html 修改配置文件 /etc/netplan/50-cloud- ...
- tcpreplay使用介绍
安装 brew install tcpreplay yum install tcpreplay tcpreplay 回放 tcpreplay is a tool for replaying netwo ...