二五、vue仿百度搜索框

来源：互联网发布：js二级下拉菜单编辑：程序博客网时间：2024/06/14 18:42
<!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>
0 0