<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下vue版</title>
<link href="img/ti.ico" rel="shortcut icon" type="image/x-icon" />
<style>
*{
margin: 0;
padding: 0;
}
wrapper{
width: 1366px;
height: 600px;
margin: 0;
padding: 0;
}
.tb{
width: 100%;
height: 132px;
text-align: center;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 10px;
}
.search{
position: relative;
width: 540px;
height: 37px;
margin: 0 auto;
margin-top: 5px;
}
.srk{
float: left;
width: 428px;
height: 35px;
padding: 0 5px;
font-size: 13px;
border:1px solid;
border-color: rgb(184,184,184);
}
.srk:hover{
border-color: gray;
}
.searchBtn{
float: left;
width:100px;
height:38px;
line-height: 38px;
text-align: center;
font-size: 15px;
color: white;
background-color: dodgerblue;
}
.searchBtn:hover{
background-color: #4169E1;
}
.kzk{
position: absolute;
top: 40px;
left: 0px;
display: none;
width: 438px;
border: 1px solid gainsboro;
}
.dis{
display: block !important;
}
.kzk ul li{
width: 438px;
height: 35px;
text-indent: 10px;
line-height: 35px;
list-style-type:none ;
}
.kzk li a{
display: block;
color: #000;
text-decoration: none;
}
.his{
position: absolute;
top: 40px;
left: 0px;
display: none;
width: 438px;
border: 1px solid gainsboro;
}
.his ul li{
width: 438px;
height: 35px;
text-indent: 10px;
line-height: 35px;
list-style-type:none ;
}
.his li a{
display: block;
color: #000;
text-decoration: none;
}
/选中/
.grey {background: rgba(203,203,203,.5)!important; }
.vue{
position: fixed;
right: 0;
top: 30%;
display: block;
font-size: 14px;
color: #333;
text-decoration: none;
border:1px solid #67C2EF;
border-radius: 5px;
}
</style>
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>
<script>
window.onload = function () {
//实例化一个vue
new Vue({
//对象box
el: '#vue-bd',
//数据
data: {
searchData: [],
inputText: '',
searchResultBoxShow: false,
currIndex: -1,
historySearchData: [],
searchDataJson: '',
isNull: true,
},
//方法
methods: {
//jsonp
get() {
if (event.keyCode == 38 || event.keyCode == 40) return;
// if (event.keyCode == 13) {
// //按下enter键搜索
// this.historySearchData.push(this.inputText.trim())
// this.historySearchData = [...new Set(this.historySearchData)]
// this.historySearchData.slice(0, 5)
// this.inputText = ''
// this.searchsearchResultBoxShowShow = false;
// }
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: this.inputText
},
jsonp: 'cb'
}).then(function (res) {
this.searchDataJson = res.data
if (res.data.s != "") {
this.searchResultBoxShow = true;
this.searchData = res.data.s.slice(0, 10);
} else {
this.searchResultBoxShow = false;
this.searchData = [];
}
}, function () {
//错误
});
},
selectKeyDown() {
this.currIndex++;
if (this.currIndex == this.searchData.length) {
this.currIndex = -1;
}
this.inputText = this.searchData[this.currIndex]
},
selectKeyUp() {
this.currIndex--;
if (this.currIndex == -2) {
this.currIndex = this.searchData.length - 1;
}
this.inputText = this.searchData[this.currIndex]
},
search() {
// console.log('查询' + this.inputText);
this.searchsearchResultBoxShowShow = false;
this.historySearchData.push(this.inputText.trim())
this.inputText = ''
this.historySearchData = [...new Set(this.historySearchData)]
console.log(this.historySearchData);
this.historySearchData.slice(0, 5)
}
},
//监听
watch: {
inputText: function () {
if (this.inputText.length === 0) {
this.isNull = false
} else {
this.isNull = true
}
console.log(this.inputText.length, this.isNull);
this.get();
}
}
});
};
</script>
</head>
<body>
<div id="wrapper">
<div id="vue-bd">
<div class="midbar">
<div class="search">
<input type="text" class="srk" id="srk" v-model="inputText" @blur="searchResultBoxShow = false"
@focus="searchResultBoxShow = true" @keyup="get($event)" @keyup.down.prevent="selectKeyDown()"
@keyup.up.prevent="selectKeyUp()" ref="search" />
<div class="searchBtn" @click="search()">搜索</div>
<div class="kzk" :class="{dis:searchResultBoxShow}" v-else>
<ul>
<li v-for="(index,item) in searchData">
<span :class={grey:index==currIndex}>{{item}}</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 搜索数据展现 -->
</div>
</div>
</div>
</body>
</html>
