百度搜索框?qū)嵗?/h3>
- 思路：
- 通過vue.js和bootstrap.js來構(gòu)建搜索框和列表頁面架構(gòu)；
- 文本輸入框通過v-model設(shè)置與應(yīng)用的雙向綁定琢歇，列表框通過v-for來遍歷，獲取遍歷的數(shù)據(jù)動態(tài)綁定在列表中；
- 設(shè)置
@keyup事件矿微，觸發(fā)函數(shù)，函數(shù)內(nèi)尚揣，通過vue-resource插件涌矢，進行jsonp請求數(shù)據(jù)，請求百度服務(wù)器上的數(shù)據(jù)快骗，通過設(shè)置params中的wd值來進行查找數(shù)據(jù)娜庇，賦值給ary，遍歷到列表中方篮；
- 實現(xiàn)文本輸入框輸入內(nèi)容名秀，列表同時更新數(shù)據(jù)；
- 設(shè)置列表中第一條數(shù)據(jù)點亮效果藕溅，動態(tài)綁定樣式匕得，利用
:class="{active:index===i}"，意思為巾表，當index值與i值相等時汁掠，設(shè)置類名active；其中index為data中設(shè)置的值集币，i為遍歷ary數(shù)組時的列表數(shù)據(jù)索引值考阱；
- 設(shè)置列表中第一條數(shù)據(jù)點亮，即設(shè)置index的初始值為0鞠苟；
- 設(shè)置下鍵效果：按鍵盤中的下鍵乞榨，實現(xiàn)列表數(shù)據(jù)的變化和點亮；同時輸入框中的數(shù)據(jù)顯示選中的列表中的數(shù)據(jù)当娱；
- 設(shè)置
@keydown.down事件吃既，觸發(fā)putDown函數(shù)，函數(shù)中改變this.index的值趾访，讓其累加态秧，然后通過%來控制上限；
- 設(shè)置上鍵效果：按鍵盤中的上鍵扼鞋，實現(xiàn)列表數(shù)據(jù)的變化和點亮申鱼；同時輸入框中的數(shù)據(jù)顯示選中的列表中的數(shù)據(jù)；
- 設(shè)置
@keydown.up事件云头，觸發(fā)putUp函數(shù)捐友，函數(shù)中改變this.index的值，使其累減溃槐，然后判斷邊界值匣砖；控制下限；
- 注意：按上鍵時，文本框中會默認選中文字的最前面猴鲫，所以需要阻止默認事件对人，即設(shè)置
@keydown.up.prevent事件；
- 設(shè)置上下鍵的效果中拂共，需要注意牺弄，在更新輸入框中的數(shù)據(jù)后，會執(zhí)行keydown事件宜狐，重新進行數(shù)據(jù)獲取势告，然后更新列表數(shù)據(jù)，所以抚恒，需要在keydown事件函數(shù)中咱台，設(shè)置條件判斷，通過事件對象e.keyCode來判斷上下鍵俭驮，當按下上下鍵時回溺，阻止搜索程序；
- 設(shè)置回車鍵效果：當按下enter鍵后表鳍，搜索文本框中的內(nèi)容馅而；
- 設(shè)置
@keydown.enter事件，觸發(fā)goSearch函數(shù)譬圣，函數(shù)中利用window.open(url)來打開搜索地址遮婶；
- 注意點：
- 文本框必須綁定keyup事件检疫，不能綁定keydown事件砖瞧；在獲取數(shù)據(jù)時嘀趟，必須判斷msg是否為空，如果為空绳姨，則無需發(fā)送請求登澜，并賦值ary為空；
- 實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索框</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div id="app">
<h1>百度搜索</h1>
<form>
<div class="form-group">
<input type="text" class="form-control" id="text" v-model="msg" @keyup="getData" @keydown.down="putDown" @keydown.up.prevent="putUp" @keydown.enter="goSearch"/>
</div>
</form>
<ul class="list-group">
<li v-for="(item,i) in ary" class="list-group-item" :class="{active:index===i}">{{item}}</li>
</ul>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"",
ary:[],
index:0
},
methods:{
getData(e){
//當按下鍵和上鍵時飘庄，阻止搜索功能脑蠕；
if(e.keyCode===38 || e.keyCode===40) return;
//發(fā)送jsonp請求，跨域獲取數(shù)據(jù)
if(this.msg!==""){
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params:{
wd:this.msg
},
jsonp:"cb"
}).then(res=>{
this.ary=res.body.s;
})
}else{
this.ary=[];
}
},
putDown(){
//按下鍵跪削，讓對應(yīng)的變亮谴仙，主要是改變this.index的值
this.index++;
this.index%=this.ary.length;
//更新文本框中的數(shù)據(jù)
this.msg=this.ary[this.index];
},
putUp(){
//按上鍵，讓對應(yīng)的變亮
this.index--;
if(this.index<0){
this.index=this.ary.length-1;
}
this.msg=this.ary[this.index];
},
goSearch(){
//按下回車鍵碾盐，跳轉(zhuǎn)搜索
window.open(`https://www.baidu.com/s?wd=${this.msg}`,"_blank")
}
}
})
</script>
</body>
</html>
升級版百度搜索框?qū)嵗?/h3>
- 思路：
- 引入bootstrap插件晃跺；寫出靜態(tài)頁面；
- 通過vue-resource插件毫玖，向百度服務(wù)器發(fā)送請求掀虎，獲取數(shù)據(jù)凌盯； 文本框綁定keyup事件，當鍵盤抬起時烹玉，獲取新的輸入值驰怎，然后在獲取數(shù)據(jù)；
- 獲取數(shù)據(jù)賦值dataAry變量二打，通過v-for遍歷插入dom結(jié)構(gòu)砸西；
- 功能1：通過按向上，向下鍵來使對應(yīng)列表中的內(nèi)容賦值到文本輸入框內(nèi)址儒，并且該列被點亮；
- 文本框需綁定兩個事件：keydown.up和keydown.down 指的是鍵盤上向下和向上按鍵事件衅疙；注意：當向上按鍵時莲趣，光標會在文本的最前面，所以需要阻止默認事件饱溢，則需綁定keydown.up.prevent
- 設(shè)置變量n喧伞，作為整個項目中的介質(zhì)，目的：通過設(shè)置n的值绩郎，來點亮指定的列表潘鲫；
- 在html中，綁定li時肋杖，通過v-bind來綁定class溉仑，設(shè)置為三目，通過判斷index和n-1值是否相等状植，來設(shè)置類名浊竟，進而點亮列表；
- 在兩個事件觸發(fā)的函數(shù)中津畸，對n進行自加和自減處理振定，設(shè)置邊界值判斷；
- 對文本框內(nèi)數(shù)據(jù)進行賦值：在事件函數(shù)中肉拓，通過n的值來獲取指定列表的索引值后频，進而在dataAry數(shù)組中找到對應(yīng)的元素內(nèi)容，賦值給msg即可暖途；
- 當向上向下回到文本框時卑惜，讓文本框中的數(shù)據(jù)為最開始輸入的內(nèi)容；方法：設(shè)置變量initVal丧肴，用來存儲最初的輸入值残揉，賦值位置為getData()函數(shù)中，在每次向百度服務(wù)器發(fā)送請求之前芋浮，賦值給initVal抱环；
- 注意：文本框綁定了keyup事件壳快，當向下和向上按鍵觸發(fā)后，也會再次觸發(fā)镇草，所以眶痰，必須阻止兩個事件的執(zhí)行；方法：通過事件對象e來獲取按鍵碼梯啤，進而阻止指定按鍵碼的執(zhí)行竖伯；
- 功能2：光標移入列表后，列表項被點亮因宇；文本框中的內(nèi)容不改變七婴；并且，光標移出列表后察滑，點亮消失打厘；滿足：當光標移入一個列表后，該列表被點亮贺辰，然后按上下鍵户盯，列表會依次被點亮；
- 給每個列表綁定兩個事件：mouseenter和mouseleave事件饲化；光標移入移出事件莽鸭；
- 事件函數(shù)中，通過獲取列表的索引值吃靠，來賦值n的值硫眨；進而實現(xiàn)點亮功能；
- 移出函數(shù)中巢块，賦值n值為文本框?qū)?yīng)的值捺球；
- 功能3：當按鍵盤enter鍵后，跳轉(zhuǎn)到新的頁面搜索夕冲；當鼠標點擊列表項時氮兵，跳轉(zhuǎn)到新的頁面加載；
- 給文本輸入框綁定keydown.enter事件歹鱼；
- 給列表項綁定click事件泣栈；
- 兩個事件，可以綁定同一個函數(shù)弥姻；
- 跳轉(zhuǎn)到新的頁面加載：通過window.open(url)實現(xiàn)南片；window.href=url實現(xiàn)在本頁面中加載；
- 注意：keydown.enter事件綁定時庭敦，為傳入實參疼进，則觸發(fā)后會給函數(shù)體默認傳入事件對象e，而click事件因為賦值實參秧廉，所以不會默認傳入事件對象e伞广；所以需要給函數(shù)體設(shè)置兩個形參拣帽；判斷第二個形參是否被賦值實參，來判斷是觸發(fā)的哪個事件嚼锄；進而進行不同操作减拭；
- 注意點：
- 文本輸入框中綁定keyup事件，不能綁定keydown事件区丑，當鍵盤抬起時拧粪，獲取msg，然后獲取數(shù)據(jù)沧侥；
- 在獲取數(shù)據(jù)之前可霎，必須判斷msg是否為空，若為空宴杀，則無需在發(fā)送請求獲取數(shù)據(jù)啥纸；
-
@keydown.enter和@click事件；1）在綁定事件時婴氮，如果不傳實參，則事件觸發(fā)后默認向函數(shù)體中傳入一個事件對象e盾致；2）在綁定事件時主经，若給函數(shù)體傳了實參值，則事件在觸發(fā)后庭惜，不會再默認傳入事件對象罩驻，若需要獲取事件對象，則可在傳入實參時护赊，傳入$event實參惠遏；
- 鼠標移入移出事件@mouseenter和@mouseleave;
-
window.location.href=url指的是：在本頁面中加載新頁面；
window.open(url)指的是：在新的頁面中加載新頁面骏啰；
- 實例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面节吮，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>升級版百度搜索框?qū)嵗?lt;/title>
<!-- Bootstrap -->
<link rel="stylesheet">
<style>
h1{
margin: 20px 0 10px;
}
.input-group{
width: 100%;
}
.input-group .form-control:last-child{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.input-group .form-control:first-child{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.list-group{
margin: 15px 0;
}
.list-group .list-group-item{
cursor: pointer;
}
.bgc{
background-color: lightskyblue;
}
</style>
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="app">
<h1>百度搜索框?qū)嵗?lt;/h1>
<div class="input-group">
<input type="text" class="form-control" v-model="msg" @keyup="getData" @keydown.up.prevent="putUp" @keydown.down="putDown" @keydown.enter="goSearch"/>
</div>
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in dataAry" :class="index===n-1?'bgc':''" :key="index" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave(index)" @click="goSearch(index,item)">{{item}}</li>
</ul>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery判耕，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件透绩。你也可以根據(jù)需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue.js-->
<script src="./js/vue.js"></script>
<!--引入vue-resource.js-->
<script src="./js/vue-resource.js"></script>
<script>
new Vue({
el: "#app",
created(){
if(this.msg=""){
this.dataAry=[];
}
},
data: {
initVal:this.msg,
msg: "",
n: 0,
dataAry: []
},
methods: {
getData(e){
//當按鍵為向上和向下時壁熄，無需獲取新的數(shù)據(jù)
if(e.keyCode===38 || e.keyCode===40) return;
if(this.msg!==""){
this.initVal=this.msg;
this.n=0;
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params: {
wd: this.msg
},
jsonp: "cb"
}).then(res => {
var ary=res.body.s;
if(ary.length>=6){
ary.splice(6);
}
this.dataAry=ary;
},err => {
console.log(err);
})
}else{
this.dataAry=[];
}
},
putUp(){
this.n--;
if(this.n===0){
//賦值為原來輸入框內(nèi)的數(shù)據(jù)
this.msg=this.initVal;
return;
}
if(this.n<0){
if(this.dataAry.length>0){
this.n=this.dataAry.length;
}
}
//將數(shù)組內(nèi)容賦給文本輸入框
this.msg=this.dataAry[this.n-1];
},
putDown(){
this.n++;
if(this.n>this.dataAry.length){
this.msg=this.initVal;
this.n=0;
return;
}
this.msg=this.dataAry[this.n-1];
},
mouseEnter(index){
this.n=index+1;
},
mouseLeave(){
//移出后帚豪，背景色消失；
this.n=0;
},
goSearch(e,item){
//知識點：@keydown.enter和@click事件草丧；1）在綁定事件時狸臣，如果不傳實參，則事件觸發(fā)后默認向函數(shù)體中傳入一個事件對象e昌执；2）在綁定事件時烛亦，若給函數(shù)體傳了實參值诈泼，則事件在觸發(fā)后，不會再默認傳入事件對象此洲，若需要獲取事件對象厂汗，則可在傳入實參時，傳入$event實參呜师；
//篩選娶桦，判斷第二個參數(shù)是否會傳入，若傳入了汁汗，則為點擊事件觸發(fā)衷畦，則需將文本輸入框內(nèi)的數(shù)據(jù)賦值為列表框內(nèi)的數(shù)據(jù)，并跳轉(zhuǎn)頁面
if(item!==undefined){
//如果不等于undefined知牌，則為click事件
this.msg=item;
}
//跳轉(zhuǎn)新頁面搜索
window.open("https://www.baidu.com/s?wd="+this.msg);
this.n=0;
}
}
})
</script>
</body>
</html>
- 通過vue.js和bootstrap.js來構(gòu)建搜索框和列表頁面架構(gòu)；
- 文本輸入框通過v-model設(shè)置與應(yīng)用的雙向綁定琢歇，列表框通過v-for來遍歷，獲取遍歷的數(shù)據(jù)動態(tài)綁定在列表中；
- 設(shè)置
@keyup事件矿微，觸發(fā)函數(shù)，函數(shù)內(nèi)尚揣，通過vue-resource插件涌矢，進行jsonp請求數(shù)據(jù)，請求百度服務(wù)器上的數(shù)據(jù)快骗，通過設(shè)置params中的wd值來進行查找數(shù)據(jù)娜庇，賦值給ary，遍歷到列表中方篮； - 實現(xiàn)文本輸入框輸入內(nèi)容名秀，列表同時更新數(shù)據(jù)；
- 設(shè)置列表中第一條數(shù)據(jù)點亮效果藕溅，動態(tài)綁定樣式匕得，利用
:class="{active:index===i}"，意思為巾表，當index值與i值相等時汁掠，設(shè)置類名active；其中index為data中設(shè)置的值集币，i為遍歷ary數(shù)組時的列表數(shù)據(jù)索引值考阱； - 設(shè)置列表中第一條數(shù)據(jù)點亮，即設(shè)置index的初始值為0鞠苟；
- 設(shè)置下鍵效果：按鍵盤中的下鍵乞榨，實現(xiàn)列表數(shù)據(jù)的變化和點亮；同時輸入框中的數(shù)據(jù)顯示選中的列表中的數(shù)據(jù)当娱；
- 設(shè)置
@keydown.down事件吃既，觸發(fā)putDown函數(shù)，函數(shù)中改變this.index的值趾访，讓其累加态秧，然后通過%來控制上限；
- 設(shè)置
- 設(shè)置上鍵效果：按鍵盤中的上鍵扼鞋，實現(xiàn)列表數(shù)據(jù)的變化和點亮申鱼；同時輸入框中的數(shù)據(jù)顯示選中的列表中的數(shù)據(jù)；
- 設(shè)置
@keydown.up事件云头，觸發(fā)putUp函數(shù)捐友，函數(shù)中改變this.index的值，使其累減溃槐，然后判斷邊界值匣砖；控制下限； - 注意：按上鍵時，文本框中會默認選中文字的最前面猴鲫，所以需要阻止默認事件对人，即設(shè)置
@keydown.up.prevent事件；
- 設(shè)置
- 設(shè)置上下鍵的效果中拂共，需要注意牺弄，在更新輸入框中的數(shù)據(jù)后，會執(zhí)行keydown事件宜狐，重新進行數(shù)據(jù)獲取势告，然后更新列表數(shù)據(jù)，所以抚恒，需要在keydown事件函數(shù)中咱台，設(shè)置條件判斷，通過事件對象e.keyCode來判斷上下鍵俭驮，當按下上下鍵時回溺，阻止搜索程序；
- 設(shè)置回車鍵效果：當按下enter鍵后表鳍，搜索文本框中的內(nèi)容馅而；
- 設(shè)置
@keydown.enter事件，觸發(fā)goSearch函數(shù)譬圣，函數(shù)中利用window.open(url)來打開搜索地址遮婶；
- 設(shè)置
- 文本框必須綁定keyup事件检疫，不能綁定keydown事件砖瞧；在獲取數(shù)據(jù)時嘀趟，必須判斷msg是否為空，如果為空绳姨，則無需發(fā)送請求登澜，并賦值ary為空；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索框</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div id="app">
<h1>百度搜索</h1>
<form>
<div class="form-group">
<input type="text" class="form-control" id="text" v-model="msg" @keyup="getData" @keydown.down="putDown" @keydown.up.prevent="putUp" @keydown.enter="goSearch"/>
</div>
</form>
<ul class="list-group">
<li v-for="(item,i) in ary" class="list-group-item" :class="{active:index===i}">{{item}}</li>
</ul>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"",
ary:[],
index:0
},
methods:{
getData(e){
//當按下鍵和上鍵時飘庄，阻止搜索功能脑蠕；
if(e.keyCode===38 || e.keyCode===40) return;
//發(fā)送jsonp請求，跨域獲取數(shù)據(jù)
if(this.msg!==""){
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params:{
wd:this.msg
},
jsonp:"cb"
}).then(res=>{
this.ary=res.body.s;
})
}else{
this.ary=[];
}
},
putDown(){
//按下鍵跪削，讓對應(yīng)的變亮谴仙，主要是改變this.index的值
this.index++;
this.index%=this.ary.length;
//更新文本框中的數(shù)據(jù)
this.msg=this.ary[this.index];
},
putUp(){
//按上鍵，讓對應(yīng)的變亮
this.index--;
if(this.index<0){
this.index=this.ary.length-1;
}
this.msg=this.ary[this.index];
},
goSearch(){
//按下回車鍵碾盐，跳轉(zhuǎn)搜索
window.open(`https://www.baidu.com/s?wd=${this.msg}`,"_blank")
}
}
})
</script>
</body>
</html>
- 思路：
- 引入bootstrap插件晃跺；寫出靜態(tài)頁面；
- 通過vue-resource插件毫玖，向百度服務(wù)器發(fā)送請求掀虎，獲取數(shù)據(jù)凌盯； 文本框綁定keyup事件，當鍵盤抬起時烹玉，獲取新的輸入值驰怎，然后在獲取數(shù)據(jù)；
- 獲取數(shù)據(jù)賦值dataAry變量二打，通過v-for遍歷插入dom結(jié)構(gòu)砸西；
- 功能1：通過按向上，向下鍵來使對應(yīng)列表中的內(nèi)容賦值到文本輸入框內(nèi)址儒，并且該列被點亮；
- 文本框需綁定兩個事件：keydown.up和keydown.down 指的是鍵盤上向下和向上按鍵事件衅疙；注意：當向上按鍵時莲趣，光標會在文本的最前面，所以需要阻止默認事件饱溢，則需綁定keydown.up.prevent
- 設(shè)置變量n喧伞，作為整個項目中的介質(zhì)，目的：通過設(shè)置n的值绩郎，來點亮指定的列表潘鲫；
- 在html中，綁定li時肋杖，通過v-bind來綁定class溉仑，設(shè)置為三目，通過判斷index和n-1值是否相等状植，來設(shè)置類名浊竟，進而點亮列表；
- 在兩個事件觸發(fā)的函數(shù)中津畸，對n進行自加和自減處理振定，設(shè)置邊界值判斷；
- 對文本框內(nèi)數(shù)據(jù)進行賦值：在事件函數(shù)中肉拓，通過n的值來獲取指定列表的索引值后频，進而在dataAry數(shù)組中找到對應(yīng)的元素內(nèi)容，賦值給msg即可暖途；
- 當向上向下回到文本框時卑惜，讓文本框中的數(shù)據(jù)為最開始輸入的內(nèi)容；方法：設(shè)置變量initVal丧肴，用來存儲最初的輸入值残揉，賦值位置為getData()函數(shù)中，在每次向百度服務(wù)器發(fā)送請求之前芋浮，賦值給initVal抱环；
- 注意：文本框綁定了keyup事件壳快，當向下和向上按鍵觸發(fā)后，也會再次觸發(fā)镇草，所以眶痰，必須阻止兩個事件的執(zhí)行；方法：通過事件對象e來獲取按鍵碼梯啤，進而阻止指定按鍵碼的執(zhí)行竖伯；
- 功能2：光標移入列表后，列表項被點亮因宇；文本框中的內(nèi)容不改變七婴；并且，光標移出列表后察滑，點亮消失打厘；滿足：當光標移入一個列表后，該列表被點亮贺辰，然后按上下鍵户盯，列表會依次被點亮；
- 給每個列表綁定兩個事件：mouseenter和mouseleave事件饲化；光標移入移出事件莽鸭；
- 事件函數(shù)中，通過獲取列表的索引值吃靠，來賦值n的值硫眨；進而實現(xiàn)點亮功能；
- 移出函數(shù)中巢块，賦值n值為文本框?qū)?yīng)的值捺球；
- 功能3：當按鍵盤enter鍵后，跳轉(zhuǎn)到新的頁面搜索夕冲；當鼠標點擊列表項時氮兵，跳轉(zhuǎn)到新的頁面加載；
- 給文本輸入框綁定keydown.enter事件歹鱼；
- 給列表項綁定click事件泣栈；
- 兩個事件，可以綁定同一個函數(shù)弥姻；
- 跳轉(zhuǎn)到新的頁面加載：通過window.open(url)實現(xiàn)南片；window.href=url實現(xiàn)在本頁面中加載；
- 注意：keydown.enter事件綁定時庭敦，為傳入實參疼进，則觸發(fā)后會給函數(shù)體默認傳入事件對象e，而click事件因為賦值實參秧廉，所以不會默認傳入事件對象e伞广；所以需要給函數(shù)體設(shè)置兩個形參拣帽；判斷第二個形參是否被賦值實參，來判斷是觸發(fā)的哪個事件嚼锄；進而進行不同操作减拭；
- 注意點：
- 文本輸入框中綁定keyup事件，不能綁定keydown事件区丑，當鍵盤抬起時拧粪，獲取msg，然后獲取數(shù)據(jù)沧侥；
- 在獲取數(shù)據(jù)之前可霎，必須判斷msg是否為空，若為空宴杀，則無需在發(fā)送請求獲取數(shù)據(jù)啥纸；
-
@keydown.enter和@click事件；1）在綁定事件時婴氮，如果不傳實參，則事件觸發(fā)后默認向函數(shù)體中傳入一個事件對象e盾致；2）在綁定事件時主经，若給函數(shù)體傳了實參值，則事件在觸發(fā)后庭惜，不會再默認傳入事件對象罩驻，若需要獲取事件對象，則可在傳入實參時护赊，傳入$event實參惠遏； - 鼠標移入移出事件@mouseenter和@mouseleave;
-
window.location.href=url指的是：在本頁面中加載新頁面；
window.open(url)指的是：在新的頁面中加載新頁面骏啰；
- 實例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面节吮，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>升級版百度搜索框?qū)嵗?lt;/title>
<!-- Bootstrap -->
<link rel="stylesheet">
<style>
h1{
margin: 20px 0 10px;
}
.input-group{
width: 100%;
}
.input-group .form-control:last-child{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.input-group .form-control:first-child{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.list-group{
margin: 15px 0;
}
.list-group .list-group-item{
cursor: pointer;
}
.bgc{
background-color: lightskyblue;
}
</style>
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="app">
<h1>百度搜索框?qū)嵗?lt;/h1>
<div class="input-group">
<input type="text" class="form-control" v-model="msg" @keyup="getData" @keydown.up.prevent="putUp" @keydown.down="putDown" @keydown.enter="goSearch"/>
</div>
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in dataAry" :class="index===n-1?'bgc':''" :key="index" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave(index)" @click="goSearch(index,item)">{{item}}</li>
</ul>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery判耕，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件透绩。你也可以根據(jù)需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue.js-->
<script src="./js/vue.js"></script>
<!--引入vue-resource.js-->
<script src="./js/vue-resource.js"></script>
<script>
new Vue({
el: "#app",
created(){
if(this.msg=""){
this.dataAry=[];
}
},
data: {
initVal:this.msg,
msg: "",
n: 0,
dataAry: []
},
methods: {
getData(e){
//當按鍵為向上和向下時壁熄，無需獲取新的數(shù)據(jù)
if(e.keyCode===38 || e.keyCode===40) return;
if(this.msg!==""){
this.initVal=this.msg;
this.n=0;
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params: {
wd: this.msg
},
jsonp: "cb"
}).then(res => {
var ary=res.body.s;
if(ary.length>=6){
ary.splice(6);
}
this.dataAry=ary;
},err => {
console.log(err);
})
}else{
this.dataAry=[];
}
},
putUp(){
this.n--;
if(this.n===0){
//賦值為原來輸入框內(nèi)的數(shù)據(jù)
this.msg=this.initVal;
return;
}
if(this.n<0){
if(this.dataAry.length>0){
this.n=this.dataAry.length;
}
}
//將數(shù)組內(nèi)容賦給文本輸入框
this.msg=this.dataAry[this.n-1];
},
putDown(){
this.n++;
if(this.n>this.dataAry.length){
this.msg=this.initVal;
this.n=0;
return;
}
this.msg=this.dataAry[this.n-1];
},
mouseEnter(index){
this.n=index+1;
},
mouseLeave(){
//移出后帚豪，背景色消失；
this.n=0;
},
goSearch(e,item){
//知識點：@keydown.enter和@click事件草丧；1）在綁定事件時狸臣，如果不傳實參，則事件觸發(fā)后默認向函數(shù)體中傳入一個事件對象e昌执；2）在綁定事件時烛亦，若給函數(shù)體傳了實參值诈泼，則事件在觸發(fā)后，不會再默認傳入事件對象此洲，若需要獲取事件對象厂汗，則可在傳入實參時，傳入$event實參呜师；
//篩選娶桦，判斷第二個參數(shù)是否會傳入，若傳入了汁汗，則為點擊事件觸發(fā)衷畦，則需將文本輸入框內(nèi)的數(shù)據(jù)賦值為列表框內(nèi)的數(shù)據(jù)，并跳轉(zhuǎn)頁面
if(item!==undefined){
//如果不等于undefined知牌，則為click事件
this.msg=item;
}
//跳轉(zhuǎn)新頁面搜索
window.open("https://www.baidu.com/s?wd="+this.msg);
this.n=0;
}
}
})
</script>
</body>
</html>
