vue下拉搜索
vue版本是1.0.21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉搜索框</title>
<script src="vue.js"></script>
<script src="vue-resource.js"></script> <style>
.gray{
background-color: #ccc;
}
</style>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:"body",
data:{
myData:[],
t:"",
now:-1,
},
methods:{
get:function(e){
if(e.keyCode == 38 || e.keyCode == 40 ) return;
if(e.keyCode == 13){
window.open('https://www.baidu.com/s?wd='+this.t);
this.t='';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t
},{
jsonp:"cb"
}).then(function(res){
this.myData = res.data.s;
},function(res){
alert(res.status);
})
},
changeDown:function(){
this.now++;
if(this.now == this.myData.length) this.now=-1;
this.t = this.myData[this.now];
},
changeUp:function(){
this.now--;
if(this.now==-2) this.now=this.myData.length-1;
this.t = this.myData[this.now];
} }
})
}
</script>
</head>
<body>
<input type="text" v-model="t" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()" />
<ul>
<li v-for="item in myData" :class="{gray:$index == now}">{{ item }}</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</body>
</html>
vue下拉搜索的更多相关文章
- yii2 GridView 下拉搜索实现案例教程
作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章 ...
- GridView 下拉搜索
/** * 下拉筛选 * @column string 字段 * @value mix 字段对应的值,不指定则返回字段数组 * @return mix 返回某个值或者数组 */ public stat ...
- angularjs select下拉搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- laravel7 下拉搜索
html:页面 首先给下拉框一个页面改变事件,将下拉框的值发送至后台,进行查询 <select name="interest" id="serarch" ...
- select2 下拉搜索 可编辑可搜索 / 只可搜索
官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...
- vue 下拉刷新数据的插件的使用：
1.安装: npm i vue-scroller -S npm install vue-scroller -D 2.在需要加载的页面中引入,或在公共js文件中引入: import VueScrolle ...
- Vue 下拉框值变动事件传多个参数
在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...
- vue 下拉刷新 上拉加载（vue-scroller）
<template> <div class="wdRecordCon"> <x-header :left-options="{backTex ...
- Vue下拉刷新组件
Examples examples Installation npm install vue-pull-to --save Use Setup <template> <div> ...
随机推荐
- [label][responsive-web-design]网页响应测试各种尺寸的工具
因为现在各种各样的尺寸上网设备 ,所以我们现在的网页设计都必须要兼容到各种尺寸的屏幕,必须测试各个 size下面的页面布局与排版. 一个开发人员是不可能拥有各种设备来进行测试,那么有没有什么便捷的工具 ...
- winform 版本号比较
Version now_v = new Version(strval); Version load_v = new Version(model.version.ToString()); if (now ...
- jQuery--基本介绍与下载
本篇内容: 1.jquery学习内容 2.jquery下载,引用 3.使用顺序 4.版本 5.jquery对象与DOM对象转化 jQuery认识: jQuery学习内容 选择器 筛选器 样式操作 文本 ...
- linux进程管理（一）
进程介绍 程序和进程 程序是为了完成某种任务而设计的软件,比如OpenOffice是程序.什么是进程呢?进程就是运行中的程序. 一个运行着的程序,可能有多个进程. 比如自学it网所用的WWW服务器是a ...
- 微信小程序遇到的问题
1.小程序navigator点击时不显示背景颜色 详情见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigato ...
- 从【BZOJ4173】谈做题技巧
题目描述 ----------------------------------------------------------------------------------------------- ...
- [HTML] <meta name="viewport" content="width=device-width,initial-scale=1.0">释义
<meta name="viewport" content="width=device-width,initial-scale=1.0">这是 HT ...
- Linux 环境变量加强
Linux 环境变量加强 # 前言 今天,主要是之前搭建 GO 环境包的使用发现自己对 Linux 环境变量还不是很熟悉. 遇到环境变量的问题还是会有些懵逼.所以,今天写点Linux 环境变量的文章, ...
- UDP的优点
UDP优点 关于何时.发送什么数据的应用层控制更为精细 只需要应用层把数据传给UDP,UDP就把数据打包到网络层.对于TCP来说,存在一个拥塞控制机制,当链路变得拥塞时,会抑制TCP发送方,并造成数据 ...
- Eclipse署动态web项目方法
和MyEclipse不一样,在Eclipse中做的Web项目默认是不支持将项目发布到Web服务器上的,会发布到工作空间的某个目录,因此无法在外部启动Tomcat来运行Web项目,只有打开Eclipse ...