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> ...
随机推荐
- MS EXCEL2013添加Oracle Web ADI菜单
- delphi 10.1 berlin datasnap提交clientdataset.delta报：invalid variant type conversion(类型转换错误)问题的解决
delphi 10.1 berlin datasnap提交clientdataset.delta报:invalid variant type conversion(类型转换错误)问题的解决,需要打这个 ...
- 饿了么 PostgreSQL 优化之旅
1. 架构演变 在O2O外卖领域,基于位置服务的需求越来越多,这就要求DB能够存储地理位置信息,而在开源数据库中,对空间地理数据支持比较好的要数PG的插件Postgis. 饿了么在使用PG的过程中,由 ...
- 使用google chrome抓取数据：抓取全国的高中的数据
http://tomycat.github.io/blog/other/2014/05/28/use-google-chrome-capture-data.html
- Linux下source文件两种方法
1.直接source命令加文件 source /etc/rc.d/init.d/functions 2.点(.)加文件 . /etc/rc.d/init.d/functions
- sweetalert 快速显示两个提示， 第二个显示不出的问题
今天在使用 sweetalert 做提示框的时候, 有个操作快速做了两次提示, 发现第二次显示不出: sweetAlert({}, function() { $.get('', function() ...
- vim命令以及gcc编译器的常用cmd
Gcc常用命令: -c 仅对源文件进行编译,不链接生成可执行文件.常用于查错和只生成目标文件. -o 经过gcc处理过后的结果保存在-o后面的文件中,可以是多种文件 ...
- .Net面试经验，从北京到杭州
首先简单说下,本人小本,目前大四软件工程专业,大三阴差阳错地选了.Net方向,也是从大三开始接触.Net.自认为在学生中.net基础还可以,嘿嘿,吹一下. 大四第一学期学校安排去北京培训,培训了两个月 ...
- python--基础数据类型 set集合
一.set集合 set集合是python的一个基本数据类型,一般不是很常用.set中的元素是不重复的.无序的.里面的元素必须是可hash的(int, str, tuple, bool) 注意: s ...
- python--生成器,生成器推导式, yield from
一.生成器 生成器的本质就是迭代器,它一个一个的创建对象. 在python中有三种方式获取生成器: 1.通过生成器函数 2.通过各种推导式来实现生成器 3.通过数据的类型转换也可以获取生成器 二.生成 ...