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> ...
随机推荐
- 微信小程序Wepy框架的三个事件交互($broadcast，$emit，$invoke)
$broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...
- Opengl的TOOL收集
1. http://my.oschina.net/sweetdark 不错的opengl学习网站 2, 优秀博客 网址: http://www.zwqxin.com/archives/opengl/s ...
- SQL Server触发器的基本使用
sqlserver_SQL触发器的使用及语法(转自:百度文库) 定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序.触发器是一个特殊的存储过程 ...
- centos6.6 下安装mysql5.7
背景 没啥好说的,就是需要搭建自己的测试数据库跟研发的数据隔离开来,需要怼mysql 这个方法只适合mysql5.7 # mysql5.6的有差异 步骤 1. 确认线上mysql的版本 SELECT ...
- Windows和linux通过命令互传文件
下载pscp https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 放在Windows的c:windows/system32下 ...
- 扫描指定ip的端口(C#)
class PingExam { public static void Main() { Ping ping = new Ping(); string ip = "192.168.1.43& ...
- Android阻止AlertDialog关闭
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setTitle("测试" ...
- html Canvas 画图 能够选择并能移动
canvas 画图,能够选中所画的图片并且能够随意移动图片 <html xmlns="http://www.w3.org/1999/xhtml"> <head r ...
- 474. Ones and Zeroes
In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...
- BZOJ 1934--善意的投票(最小割)
1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 2354 Solved: 1471[Submit][ ...