使用 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. continue break exit用法说明

    1,continue用法 2,break用法 3,sys.exit用法 1,continue用法(跳出本次循环,继续下次循环) for i in xrange(10): if i == 8: cont ...

  2. C#安全加密类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.S ...

  3. Oracle EBS 贷项通知单核销

    SELECT cm.trx_number ,fnd_flex_ext.get_segs('SQLGL', 'GL#', gcc.chart_of_accounts_id, ad.code_combin ...

  4. python基础学习22----协程

    协程,又称微线程.英文名Coroutine. 协程最大的优势就是协程极高的执行效率.因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线程数量越多,协程的性能优势就 ...

  5. Spark 集群管理命令

    [启动] # 启动所有服务 start-all.sh # 启动 master start-master.sh # 启动所有 worker start-slaves.sh # 启动单个 worker s ...

  6. .Net Core Api 跨域配置

    .Net Core 和Asp.Net 不同,不需要再去引用其他的跨域组件.创建项目时,就有了. 让接口实现跨域,需要配置两个地方. 一.Startup.cs 这里需要配置两个地方 public voi ...

  7. 作为一名GIS从业人员，这些网站你应该关注

    前言:今年工作的第二年,端午节后,入职新公司.总算是回归本行,从事GIS相关工作.这个系列算是对在公司工作和学习成长的记录吧. 数据篇:       作为遥感的商业应用,首先考虑的是遥感数据的产品化. ...

  8. PyQt5--QCheckBox

    1 # -*- coding:utf-8 -*- ''' Created on Sep 20, 2018 @author: SaShuangYiBing Comment: ''' import sys ...

  9. PyQt5--ToolBar

    # -*- coding:utf-8 -*- ''' Created on Sep 14, 2018 @author: SaShuangYiBing ''' import sys from PyQt5 ...

  10. linux禁止非法用户试探登录

    当我们的linux主机一旦暴露在互联网上,就会遭受到来自网络上的一些非法用户的骚扰.如弱口令扫描,试探性登录:这些行为对linux主机构成一定的威胁.那怎样防范此类的攻击了,这里写了一个脚本,功能就是 ...