使用 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. LeeTCode题解之Remove Duplicates from Sorted List

    1.题目描述 2.问题分析 对于链表中的每一个元素,找到其后面和它不相等的第一个元素,然后指向该元素. 3.代码 ListNode* deleteDuplicates(ListNode* head) ...

  2. Oracle EBS INV 获取现有量等值

    DECLARE L_api_return_status VARCHAR2(1); l_qty_oh NUMBER; l_qty_res_oh NUMBER; l_qty_res NUMBER; l_q ...

  3. .net core 在linux系统运行

    .net都已经跨平台了,所以想把一些东西部署到linux服务器上去 ,首先介绍一款叫做MobaXterm的软件,功能相当强大,感觉比xshell和putty好用,可以相对方便的操作linux系统,官网 ...

  4. 10分钟让你明白MySQL是如何利用索引的

    一.前言 在MySQL中进行SQL优化的时候,经常会在一些情况下,对MySQL能否利用索引有一些迷惑. 譬如: MySQL 在遇到范围查询条件的时候就停止匹配了,那么到底是哪些范围条件? MySQL ...

  5. python下wxpython程序国际化的实践（中文英文切换）

    一.什么是python的国际化(I18N) 有关I18N,百度上解释一大堆,个人比较喜欢这个说法. i18n是 Internationalization 这个英文的简写,因为International ...

  6. myeclipse10无法weblogic10.3的问题解决方案

    在完成了myec与wl10的基本配置后,启动报如下错误 Parsing Failure in config.xml: java.lang.AssertionError: java.lang.Class ...

  7. Python基础5

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 温故知新 1. 集合 主要作用: 去重 关系测 ...

  8. QT5 视图坐标

    又出错了. . main.obj:-1: error: LNK2001: 无法解析的外部符号 "public: virtual struct QMetaObject const * __th ...

  9. PHP中全局变量global和$GLOBALS[]的区别分析

    $GLOBALS['var']是外部的全局变量本身,global $var是外部$var的同名引用或者指针     一.举例比较 例一: 复制代码 代码如下: <?php $var1 = 1; ...

  10. leetcode121—Best Time to Buy and Sell Stock

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...