基于Vue.js2.0实现百度搜索框效果

使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下

创新互联自2013年创立以来，是专业互联网技术服务公司，拥有项目成都网站设计、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元嵩县做网站,已为上家服务,为嵩县各地企业和个人服务,联系电话:13518219792

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>Vue模拟百度搜索</title>
 <style type="text/css">
 body, html{
  padding: 0;
  margin: 0;
 }
 #box{
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .input{
  width: 500px;
  height: 30px;
  text-indent: 4px;
 }
 .baidu input{
  height: 30px;
  cursor: pointer;
  color: #fff;
  letter-spacing: 1px;
  background: #3385ff;
  border: 1px solid #2d78f4;
 }
 ul{
  padding: 0;
  margin-top: 6px;
 }
 li{
  list-style: none;
  margin: 4px;
 }
 li:hover{
  background: #ccc;
 }
 .bgcolor {
  background: #ccc;
 }
 </style>
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
 <script type="text/javascript">
 window.onload = function() {
  new Vue({
   el: '#box',
   data: {
    inputText: '',
    text: '',
    nowIndex: -1,
    result: []
   },
   methods: {
    show (ev) {
     if (ev.keyCode == 38 || ev.keyCode == 40) {
      if (this.nowIndex < -1){
       return;
      }
      if (this.nowIndex != this.result.length && this.nowIndex != -1) {
       this.inputText = this.result[this.nowIndex];
      }
      return;
     }
     if (ev.keyCode == 13) {
      window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
      this.inputText = '';
     }
     this.text = this.inputText;
     this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
      params: {
       wd: this.inputText
      },
      jsonp: 'cb'
     }).then(res => {
      this.result = res.data.s;
     })
    },
    goto () {
     window.open('https://www.baidu.com/s?wd=' + this.inputText, '_blank');
     this.inputText = '';
    },
    gotoItem(item) {
     window.open('https://www.baidu.com/s?wd=' + item, '_blank');
     this.inputText = '';
    },
    down () {
     this.nowIndex++;
     if (this.nowIndex == this.result.length) {
      this.nowIndex = -1;
      this.inputText = this.text;
     }
    },
    up () {
     this.nowIndex--;
     if (this.nowIndex < -1){
      this.nowIndex = -1;
      return;
     }
     if (this.nowIndex == -1) {
      this.nowIndex = this.result.length;
      this.inputText = this.text;
     }
    }
   }
  });
 }
 </script>
</head>
 
<body>
 <div id="box">
 <img src="/upload/otherpica42/66583.png" width="270" height="129">
  <div>
   <div>
    <input 
     type="text" 
     class="input" 
     placeholder="请输入搜索内容 " 
     v-model='inputText' 
     @keyup='show($event)' 
     @keydown.down='down()' 
     @keydown.up.prevent='up()'
    >
    <span class="baidu" @click="goto()">
     <input type="submit" value="百度一下" >
    </span>
   </div>
   
   <ul>
    <li v-for="(item, index) in result" :class='{bgcolor: index==nowIndex}' @click="gotoItem(item)">
     {{item}}
    </li>
   </ul>
  </div>

 </div>
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

新闻标题：基于Vue.js2.0实现百度搜索框效果
网站URL：https://www.cdcxhl.com/article48/iejohp.html

成都网站建设公司_创新互联，为您提供品牌网站制作、电子商务、外贸建站、网站内链、网站排名、网页设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容