使用 Vue.js 仿百度搜索框的实例代码

更新时间：2017年05月09日 17:12:24 作者：与蟒唯舞

本篇文章主要介绍了使用 Vue.js 仿百度搜索框的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

整理文档，搜刮出一个使用 Vue.js 仿百度搜索框的实例代码，稍微整理精简一下做下分享。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue demo</title>
  <style type="text/css">
  .bg {
    background: #ccc;
  }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.1.7/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: function(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;
          })
        },
        down: function() {
          this.nowIndex++;
          if (this.nowIndex == this.result.length) {
            this.nowIndex = -1;
            this.inputText = this.text;
          }
        },
        up: function() {
          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">
    <input type="text" placeholder="请输入搜索内容" v-model='inputText' @keyup='show($event)' @keydown.down='down()' @keydown.up.prevent='up()'>
    <ul>
      <li v-for="(item, index) in result" :class='{bg: index==nowIndex}'>
        {{item}}
      </li>
    </ul>
  </div>
</body>

</html>

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

您可能感兴趣的文章:

vue页面加载时的进度条功能(实例代码)
这篇文章主要介绍了vue页面加载时的进度条功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
解决el-date-picker日期选择控件少一天的问题
这篇文章主要介绍了解决el-date-picker日期选择控件少一天的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue3+vite项目跨域配置踩坑实战篇
vue3是一个流行的前端框架,vite是一个快速的构建工具,下面这篇文章主要给大家介绍了关于vue3+vite项目跨域配置踩坑实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue.js移动端app之上拉加载以及下拉刷新实战
这篇文章主要介绍了vue.js移动端app之上拉加载以及下拉刷新实战，非常具有实用价值，需要的朋友可以参考下
2017-09-09
快速解决Vue项目在IE浏览器中显示空白的问题
今天小编就为大家分享一篇快速解决Vue项目在IE浏览器中显示空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
浅析从面向对象思维理解Vue组件
用面向对象的思维去理解Vue组件，可以将所有的事物都抽象为对象，而类或者说是组件，都具有属性和操作。这篇文章主要介绍了尝试用面向对象思维理解Vue组件,需要的朋友可以参考下
2021-07-07
vue学习笔记之作用域插槽实例分析
这篇文章主要介绍了vue学习笔记之作用域插槽,结合实例形式分析了vue.js作用域插槽基本使用方法及操作注意事项,需要的朋友可以参考下
2020-02-02
Vue中通过minio上传文件的详细步骤
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Vue中的Tree-Shaking介绍及原理
这篇文章主要介绍了Vue中的Tree-Shaking是什么,通过Tree-shaking，将没有使用的模块代码移除掉，这样来达到删除无用代码的目，本文结合实例代码详解详解，需要的朋友可以参考下
2023-04-04
vue使用directive限制表单输入整数、小数的方法
这篇文章主要介绍了vue使用directive限制表单输入整数，小数,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04