使用 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. 国内使用kubeadm部署kubernetes的完整流程

    使用阿里云的镜像安装kubeadm和kubectl cat <<EOF > /etc/yum.repos.d/kubernetes.repo [kubernetes] name=Ku ...

  2. 控制台中寄宿WCF服务

    一.首先创建一个类库,用来定义WCF服务 修改服务代码定义,具体代码如下 // 注意: 使用"重构"菜单上的"重命名"命令,可以同时更改代码和配置文件中的接口名 ...

  3. LeetCode题解之 Letter Case Permutation

    1.题目描述 2.问题分析 可以使用递归的方法解决,参考了别人的答案才写出来的. 3.代码 vector<string> letterCasePermutation(string S) { ...

  4. 【SPL标准库专题(6)】 Datastructures：SplPriorityQueue

    普通的队列是一种先进先出的数据结构,元素在队列尾追加,而从队列头取出.在优先队列中,元素被赋予优先级.当访问元素时,具有最高优先级的元素最先取出.优先队列具有最高级先出 (largest-in,fir ...

  5. HTTP 错误 401.3 - Unauthorized asp.net mvc 图片，css，js没有权限访问

    一.在服务器上发布了一个asp.net的网站,结果是页面可以显示,但是css,js,images无法访问,报错是没有权限,HTTP 错误 401.3 - Unauthorized 二.根据以往的经验, ...

  6. chmod chown llinux文件及目录的权限介绍

    linux 文件或目录的读.写.执行权限说明: chmod :设置文件或目录权限. u:所有者 g:所在组 o:其他组 a:所有人(u.g.o的总和) chmod  -R  文件1/文件2…..    ...

  7. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  8. jQuery 1.11 / 2.1 beta 版发布

    jQuery开发团队近日发布了jQuery 1.11和2.1的beta版本. jQuery 1.x版本支持IE 6/7/8,jQuery 2.x 不支持,如果你已经抛弃了IE 6/7/8用户,可以升级 ...

  9. 离线安装Cloudera Manager 5和CDH5(最新版5.9.3) 完全教程（二）基础环境安装

    一.安装CentOS 6.5 x64 具体安装过程自行百度 1.1 修改IP地址 [root@master ~]# vi /etc/sysconfig/network DEVICE=eth0 TYPE ...

  10. Sql注入测试--Sqlmap

    慕课网sqlmap学习笔记: 一.SQL注入 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 例如 (1)在url上 ...