用vue去實現百度下拉選單
阿新 • • 發佈：2019-01-29
在我們學習ajax的時候一定要做的例子就是下拉選單了吧？為什麼？因為當你輸入一個值的時候下面的div裡面會無重新整理的去加入資料，當時的實現也是挺難的，反正比下面的vue實現難。。。下面我們來看看vue（我覺得vue的出現就是good啊）
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>百度搜索</title>
<style>
.gray{
background: darkgray;
}
</style>
</head>
<script src="vue1.X.js"></script>
<script src="vue-resource.js"></script>
<body> <div id="box">下面我們是為input加入事件，keyup事件就是當你搜索的時候隨著你擡起來鍵盤，下面的li中加入值。下面我們還添加了keydown事件，能用到keydown事件的地方最好用keydown我在methods裡面寫了changedown和changeup兩個方法去控制當鍵盤上下按動時那個背景顏色跟著變化，用.prevent去阻止鍵盤預設事件的發生
<input type="text" name="" @keyup="get($event)" v-model="its" @keydown.down.prevent="changedown()" @keydown.up.prevent="changeup()">
<ul> 這個位置看版本吧，$index我這裡是用不了，就採取了它的替代方法
<li v-for="(index,value) in mydata" :class="{gray:index==nowIndex}">
{{value}}
</li>
<p v-show="mydata.length==0">暫無資料...</p>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
mydata:[],
its:'',
nowIndex:-1
},
methods: {
get: function (ev) { 當回車的時候可以搜尋輸入框中的值
if(ev.keyCode==13){這個介面去network裡面找，想做誰的都行
window.open('https://sp0.baidu.com/s?wd='+this.its)
}
if(ev.keyCode==38||ev.keyCode==40){
return;
}上面的vue-resource就是用來為這裡提供服務的，互動。。。
this.$http.jsonp('https:' +
'//sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
{wd: this.its},
{jsonp: 'cb'這裡面預設的值是callback，不過看看百度的格式裡面的是cb，你修改成cb就可以}).then(function (res) {
this.mydata=res.data.s這裡之前我想用push的結果全都整成一行了，估計要迴圈，太費勁了
}, function (req) {
alert(req.status)失敗之後要做的事情
})
},
changedown:function(){
this.nowIndex++;
if(this.nowIndex==this.mydata.length){
this.nowIndex=-1;
}
this.its=this.mydata[this.nowIndex]
},
changeup:function(){
this.nowIndex--;
if(this.nowIndex==-2){
this.nowIndex=this.mydata.length-1;
}
this.its=this.mydata[this.nowIndex]
}
}
})
這下面是我找的介面
// https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
// https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&sugmode=2&json=1&p=3&sid=1448_21116_17001_25227_25178_22074&req=2&bs=a&csor=1&cb=jQuery110202944792992942089_1513421964350&_=1513421964352
// https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch?wd=
</script>
</body>
</html>