使用 Vue.js 2.0 模仿百度搜索框

<!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="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.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.js 2.0+ Vue-resource 模仿百度搜索框的更多相关文章

  1. VUE模仿百度搜索框，按上下方向键及回车键实现搜索选中效果

    逻辑介绍: 1.表单获取焦点时,显示搜索建议框 2.输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3.表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选 ...

  2. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  3. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  4. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  5. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  6. Vue.js 2.0 参考手册.CHM下载

    下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh

  7. Vue.js 2.0版

    Vue.js 2.0版升级,更改了好多方法或指令 new Vue({ el:'#demo', data:{ msg:"vue2.0" } }) v-model lazy numbe ...

  8. 基于Vue.js 2.0 + Vuex打造微信项目

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  9. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

随机推荐

  1. idea总是编译启动报错

    使用多环境配置时候,总是会出现莫名其妙的启动报错.主要是没有多环境配置的参数,挺奇怪的,因为这个问题时现时不现.又没有什么具体规律,一直找不到原因.今天一个偶然的机会,发现会不会是这个原因?

  2. oracle学习之pl/sql使用==转载

    PLSQL循序渐进全面学习教程(全):https://blog.csdn.net/spark998/article/details/2065269

  3. CSS3动画详解（图文教程）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  4. SQLSERVER中的元数据锁

    SQLSERVER中的元数据锁 网上对于元数据锁的资料真的非常少 元数据锁一般会出现在DDL语句里 下面列出数据库引擎可以锁定的资源 资源 说明 RID 用于锁定堆(heap)中的某一行 KEY 用于 ...

  5. 基元用户模式构造--互锁构造 Interlocked 实现的异步web请求实例

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...

  6. Mariadb配置Galera集群

    一.增加MariaDB源 cd /etc/yum.repos.d vi MariaDB.repo # MariaDB 10.1 CentOS repository list - created 201 ...

  7. Android高级_第三方下载工具Volley

    Volley下载主要应用于下载文本数据和图片数据两个方向,下面分别介绍: 一.使用Volley开启下载,首先要做的是导包和添加权限: (1)在build.gradle文件中导入依赖包:compile ...

  8. .NET Core 环境下使用命令行移除某个 nuget 包的具体方法

    .NET Core 使用Nuget包一般是先写入csproj文件,然后下载保存在\bin\Debug\netcoreapp2.0\publish\下,所以可以采用如下方案进行删除操作(其中netcor ...

  9. idea 断点上面有x

    背景:确定你的java代码没有问题,并且编译通过 问题:debug 启动项目的时候没有问题,idea打断点的时候左边红色断点上面有x 原因:java文件和class文件不一致, 解决方法:ant cl ...

  10. [BUG]自己的bug自己解，记一次在变量使用过程引发的bug

    [实现的功能要求]在短信编辑界面,将所有的emoji表情全部插入到编辑区域,其中表情共有5页,每遍历完一页时需要自动翻页重新获取表情并插入,在第5页中只有10个表情 下面先看看这段代码,大家能否看出有 ...