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> ...
随机推荐
- ASP.NET Core2实现静默获取微信公众号的用户OpenId
最近在做个微信公众号的项目,需要将入口放置在公众号二级菜单内,通过点击该菜单链接后进入到该项目中去,进入到项目后程序会自动通过微信公众号的API完成用户的OpenId获取.需求很简单,实现起来也不复杂 ...
- [转载]MVC、MVP以及Model2(下)
通过采用MVC模式,我们可以将可视化UI元素的呈现.UI处理逻辑和业务逻辑分别定义在View.Controller和Model中,但是对于三者之间的交互,MVC并没有进行严格的限制.最为典型的就是允许 ...
- [Git00] Pro Git 一二章读书笔记
记得知乎以前有个问题说:如果用一天的时间学习一门技能,选什么好?里面有个说学会Git是个很不错选择,今天就抽时间感受下Git的魅力吧. Pro Git (Scott Chacon) 读书笔记: ...
- Docker在github上的站点
https://github.com/docker (docker在github上的官方地址) https://github.com/dockerfile (docker官方镜像的Dockerfile ...
- Navicat 连接阿里云RDS
背景: Navicat 是一个非常优秀与易用的数据库可视化管理软件,相信很多人都用过.这次服务器升级,数据库用了阿里云的RDS,阿里云自带的数据库管理面板功能有限,用不习惯.所以还是想着用 Navic ...
- if、else if 、else及switch...case使用小记(C#)
有时候编程编的久了,如果不停下来认真思考一下,即便是一些最基础的知识点,也可能让自己懵圈.其实,说到底还是打基础的时候没打牢,或者说自以为是地认为自己懂了,然后在打基础的时候就懒得思考懒得看了,结果就 ...
- Mycat SqlServer Do not have slave connection to use, use master connection instead
Do not have slave connection to use, use master connection instead 很奇怪啊 都是按照配置配置的 怎么就是不通呢 有点怀疑人生了吧 其 ...
- php中的XML DOM(10)
1.PHP DOM (1) Php中的DOM跟javascript不一样,属性不用另外增加一个节点 2.主要类 DOMDocument :文档类 DOMNodeList :节点列表类 DOMNode ...
- 解决:sql server无法在C盘下创建database/操作系统错误5(拒绝访问)
问题: ——无法在C盘的任何位置创建数据库文件 ——在非系统盘的F盘可以创建数据库文件 解决方法1:禁用“以管理员批准模式运行所有管理员" 解决方法2:打开C盘对Users用户的完全控制权限 ...
- [CSS3] 二级下拉导航
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...