快来收藏吧！在Vue 中使用http仿百度实现搜索功能

原创出处：http://mp.toutiao.com/preview_article/?pgc_id=6530491969771143687

老规矩，先上图1-1-1，一切看图说话：

image

图1-1-1

用户在输入框中输入关键字，系统会立刻查询出你想要的内容，通过上下键选择，按enter 键即可进去百度页面里，这看起来是不是很神奇，想不到自己也可以写个百度搜索出来，是不是很牛逼，是不是很6呢。是的话，快点赞转载，这是您对我最大的鼓励。。。废话不多说，下面看看实现方式。

此功能的技术要点主要是利用了http 请求交互以及vue中指令，事件的运用。对的，程序员学习最快的方式莫过于多写代码多练习，将理论与实际项目相结合这才是最牛逼之处，看过我文章的人一定会越来越牛逼的。

一、准备工作

1. 新建 searchWithKey.html 文件，引入vue 相关的文件，如Vue.js、vue-resource.js,不清楚使用的同学可以查看之前写的文章《今天你看了吗？Vue框架之数据交互http请求》,先写下基本的html元素标签,如代码图1-1-2：

image

图1-1-2

2. 编写html 布局代码,我们需要接收用户的输入信息,所以只要使用 标签,我们需要使用列表来展示搜索的结果,所以使用

即可，如图1-1-3

image

图1-1-3

注：

(1) v-model="searchKey" 双向数据绑定，当用户输入内容后，通过“searchKey” 可以将值传给Vue js中使用。

(2) @keydown.enter="enterToSearchResult()" 键盘Enter 键事件， @keydown.enter 与v-on:keydown.enter 一样，前者是缩写； @keyup.up.prevent="changeUpItem()"键盘向上方向键, prevent 属性是防止光标跳动； 括号内的是在Vue 中声明的方法。@keyup.down="changeDownItem()" 键盘向下方向键。

(3) v-for="(item,index) in myResult" 这种循环数组的写法还记得吗？括号内的两个参数，前者是数组中的对象，后者表示在数组中的位置。

(4) :class="{gray:index == nowIndex}" 这是什么意思？是不是有点看不懂呢。 :class 也可以写成v-bind:class, 其实是为了简单而缩写成这样子的，意思是 只要 index 与 nowIndex 相等时样式gray 才会起作用，否则无效。

3. 编写html 样式，在 与 之间编写以下代码用于美化界面，如下图1-1-4


image

图1-1-4

二、编写核心代码Vue.js

1. 声明所需要的变量及方法，如图1-1-5：

image

图1-1-5

嗯，都不要急，代码是一点一点写出来的，重要的是思路。

2. 写上核心代码，接收用户输入，开始搜索内容，因此我们可以通过Vue 中watch 来实现，watch 意思是观察某个方法或某个变量值发生变化。如下代码图1-1-6：


image

图1-1-6

从这里开始，是不是有点乱呢，先不要急，继续看下去。你们肯定是有疑问是吧，为什么这里要判断是否 等 -1 呢，因为呢，这是为避免重复调用并请求搜索新内容。当用户利用方向键进行上下内容切换时，this.nowindex 的值是会发生变化的。


image

图1-1-7 searchContentByJsonp 方法的实现

changeDownItem 和 changeUpItem 方法的实现，即键盘向上及向下事件，如下图1-1-8：


image

图1-1-8

注： 上面的有没有不理解的地方呢，比较复杂的就是逻辑，主要是判断当前下标nowIndex 的值。

当用户选中系统检索出来的内容后，按下enter 便会打开新的网页，如下图1-1-9：


image

图1-1-9

以上就是基本的核心代码，下面写上完整代码。

三、完整代码如下：