使用 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. 如何借助 HealthKit 打造一款健身应用？

    [编者按]本文作者为 Matthew Maher,文章手把手地介绍了如何借助 HealthKit 建立简单的健身应用,包含诸多代码实例.本文系国内 ITOM 管理平台 OneAPM 编译呈现. 根据新 ...

  2. 如何在 Windows 10 中搭建 Node.js 环境？

    [编者按]本文作者为 Szabolcs Kurdi,主要通过生动的实例介绍如何在 Windows 10 中搭建 Node.js 环境.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 在本文中 ...

  3. npm install "Unexpected end of JSON input while parsing near"问题

    问题 最近配了台新电脑,开始装Node环境,去官网下载了最新的Node安装包.安装也没有问题,但是在使用npm install这个命令的时候,就会出现Unexpected end of JSON in ...

  4. 美团SQL优化工具SQLAdvisor

    介绍 在数据库运维过程中,优化 SQL 是 DBA 团队的日常任务.例行 SQL 优化,不仅可以提升程序性能,还能够降低线上故障的概率. 目前常用的 SQL 优化方式包括但不限于:业务层优化.SQL逻 ...

  5. 学习H5C3

    不一样的老师,不一样风格,刚开始我们都是非常热情,知道这是非常重要的,我需要坚持,加油!!!

  6. 远程登录Linux（window下操作Linux）

    参考文章:http://www.runoob.com/linux/linux-remote-login.html 1.Window系统上 Linux 远程登录客户端有SecureCRT, Putty, ...

  7. 如何为Windows Forms应用程序添加启动参数(Start-Up Parameters)

    很多场合下,我们需要通过命令行或者快捷方式在Windows Forms程序启动时向其传递参数. 这些参数可能是用来加载某一个文档,或者是应用程序的初始化配置文件. 特别是对那些需要高度自定义配置的大程 ...

  8. JAVA springmvc 转换器

    一.有时候springmvc给咱们提供的数据转换并不能转换所有类型比如说由字符串类型转换Date类型,这时候需要我们自定义转换器,帮助springmvc转换我们需要的类型. 二.1)定义我们的转换器: ...

  9. maven使用及创建项目

    一:简单介绍 他是一个帮我们管理jar,并帮助我们处理jar包依赖. 他是一个我们编译.测试.运行.打包的一键构建. 我们在使用后面的命令的同时,前面的过程也自动执行. 二.仓库的分类: 分本地仓库. ...

  10. $Luogu P2029$ 跳舞 题解

    一道不是十分水的\(dp\). 首先我们考虑\(dp\)方程的构造.起初我定义的状态是\(dp_{i,j}\)表示前\(i\)个格子,总共跳了\(j\)次的最大得分.但事实上它并不可以转移,因为我们不 ...