欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

Vue 仿百度搜索功能实现代码

时间:2021-05-21 08:26:40|栏目:vue|点击:

无上下选择

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jsonp</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">
 <script src="../js/Vue.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{
     myData:[],
     t1:''
    },
    methods:{
     get:function(){
      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
       wd:this.t1
      },{
       jsonp:'cb'
      }).then(function(res){
       this.myData=res.data.s
      },function(){
      });
     }
    }
   });
  }
 </script>
</head>
<body>
<div id="box">
 <input type="text" v-model="t1" @keyup="get()">
 <ul>
  <li v-for="value in myData">{{value}}</li>
 </ul>
 <p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>

加上上下选择

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jsonp</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>
  .gray{
   background: #ccc;
  }
 </style>
 <script src="../js/vue1.0.js"></script>
 <script src="../js/vue-resource.js"></script>
 <script>
  window.onload=function(){
   new Vue({
    el:'body',
    data:{
     myData:[],
     t1:'',
     now:-1
    },
    methods:{
     get:function(ev){
      if(ev.keyCode==38||ev.keyCode==40){
       return;
      }
      if(ev.keyCode==13){
       window.open('https://www.baidu.com/s?wd='+this.t1);
       this.t1='';
      }
      this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
       wd:this.t1
      },{
       jsonp:'cb'
      }).then(function(res){
       this.myData=res.data.s;
      },function(){
      });
     },
     changeDown:function(){
      this.now++;
      if(this.now==this.myData.length)this.now=-1;
      this.t1=this.myData[this.now];
     },
     changeUp:function(){
      this.now--;
      if(this.now==-2)this.now=this.myData.length-1;
      this.t1=this.myData[this.now];
     }
    }
   });
  };
 </script>
</head>
<body>
<div id="box">
 <input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
 <ul>
  <li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
 </ul>
 <p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>

上一篇:Vue项目webpack打包部署到服务器的实例详解

栏    目:vue

下一篇:Vue登录主页动态背景短视频制作

本文标题:Vue 仿百度搜索功能实现代码

本文地址:http://www.codeinn.net/misctech/125868.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有