原创出处：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 布局代码,我们需要接收用户的输入信息,所以只要使用<input> 标签,我们需要使用列表来展示搜索的结果,所以使用<ul> 即可，如图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 样式，在<head> 与 </head> 之间编写以下代码用于美化界面，如下图1-1-4
image
图1-1-4
二、编写核心代码Vue.js
- 声明所需要的变量及方法，如图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
以上就是基本的核心代码，下面写上完整代码。
三、完整代码如下：
<html>
<head>
<title> 实现仿百度搜索功能 </title>
<meta charset="utf-8"/>
<script src="lib/vue/vue.js" type="text/javascript" charset="utf-8"> </script>
<script src="lib/vue/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function (){
new Vue({
el:"#box",
data:{
searchKey:"",
myResult:[],
nowIndex:-1
},
watch:{ // 观察 searchKey是否发生改变
searchKey: function(){
if( this.nowIndex ==-1){
this.searchContentByJsonp();
}
}
}
,
// 声明请求方法
methods:{
enterToSearchResult: function(){
if(this.nowIndex !=-1 && this.searchKey.length >0){
window.open('https://www.baidu.com/s?wd='+this.searchKey);
}
},
searchContentByJsonp: function(){
var apiUrl = "https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+this.searchKey;
this.$http.jsonp(apiUrl).then(function(successData){
this.myResult = JSON.parse(successData.bodyText).result;
}, function(errorData){
console.log("===============faile================="+errorData)
})
},
changeDownItem: function (){
console.log("===========changeDownItem==========");
this.nowIndex++;
if( this.nowIndex ==this.myResult.length){
this.nowIndex = 0;
}
this.searchKey = this.myResult[this.nowIndex].word;
},
changeUpItem: function (){
console.log("===========changeUpItem==========");
this.nowIndex--;
if(this.nowIndex == -1){
this.nowIndex=this.myResult.length-1;
}
this.searchKey = this.myResult[this.nowIndex].word;
}
}
})
}
</head>
<body>
<div id="box">
<input type="text" value placeholder="请输入要搜索的内容" v-model="searchKey" @keydown.enter="enterToSearchResult()" @keyup.up.prevent="changeUpItem()" @keyup.down="changeDownItem()"/>
<ul>
<li v-for="(item,index) in myResult" :class="{gray:index == nowIndex}">
<span>{{item.word}}</span>
</li>
</ul>
<p v-show="myResult.length==0">暂无数据</p>
</div>
</body>
</html>
注： 这个代码真的好难看，可以这个编辑器就这样子。唉，我也是没办法的事，还请各位多多谅解。
网友评论