<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿百度搜索框</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .bg{ background: #cccccc; } </style> <script src="vue.js"></script> <script src="vue-resource.js"></script> </head> <body> <div> <input type="text" placeholder='请输入搜索的内容。。。' v-model='info' @keyup='search($event)' @keydown.down='change()' @keydown.up.provent='up()'> <ul> <li v-for='v in myData' :class='{bg:$index==index}'>{{v}}</li> </ul> <h1 v-show='myData.length==0'>暂无数据。。。</h1> </div> <script> var myDemo= new Vue({ el:'body', data:{ myData:[], //储存搜索到的内容 info:'', //input框里输入的内容 index:-1 //索引 实现上下选择 }, methods:{ search:function (e) { // 当按上下键时返回 if(e.keyCode==38||e.keyCode==40)return; // 按回车时搜索 if(e.keyCode==13){ // 新的页面打开 window.open('https://www.baidu.com/s?wd='+this.info); this.info=''; } // 跨域调用百度搜索接口 this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.info },{ jsonp:'cb' //必须要有jsonp 后面参数根据实际需求写 }).then(function (data) { //成功是返回的内容 this.myData=data.data.s; //储存返回的内容 },function () { }) }, // 按下键往下选择 change:function () { this.index++; this.info=this.myData[this.index]; //输入框显示选择的内容 if(this.index==this.myData.length)this.index=-1; //当选到最后一个时索引变为-1 }, // 按上键往上选择 up:function () { this.index--; this.info=this.myData[this.index]; if(this.index==-1)this.index=this.myData.length-1; } } } ) </script> </body> </html>
二五、vue仿百度搜索框
最新推荐文章于 2024-07-19 13:39:06 发布