需求:
- 实现搜索框的搜索功能
a) 对用户在输入框内输入的值进行双向数据绑定
b) 点击"搜索"按钮,进行网络请求
c) 将请求回的数据在搜索框下进行展示 - 实现通过方向键控制搜索选项
a) 绑定上下方向键的处理函数
b) 对展示的数据进行样式绑定
代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-resource.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.eee{
background-color: #eee;
}
</style>
</head>
<body>
<div id="div">
<!--键盘监听 -->
<input type="text" v-model="word" @keydown.down.prevent='down()' @keydown.up.prevent='up()'/>
<!--调用几口-->
<button @click="search">搜索</button>
<ul>
<!--给被选中的加上底色-->
<li v-for="(v,k) in arr" :class="{eee: k == key}">{{ v }}</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el:'#div',
data:{
arr:[],
word:'',
key:'0'
},
methods:{
search: function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{params:{word:this.word}}).then(
function(res){
this.arr = res.data.s;
console.log(res);
}
)
},
up: function(){
this.key--;
if(this.key<0){
this.key = this.arr.length-1;
}
},
down: function(){
this.key++;
if(this.key>this.arr.length-1){
this.key = 0;
}
}
}
})
</script>