<style scoped>
ul,
li {
padding: 0;
margin: 0;
list-style-type: none;
padding: 0;
box-sizing: border-box;
}
.outbox {
margin: 0 auto;
width: 200px;
height: 30px;
position: relative;
}
.input {
box-sizing: border-box;
width: 200px;
height: 30px;
}
.showList {
position: absolute;
width: 180px;
border: 1px solid #789;
}
.ulList {
width: 100%;
margin: 0;
height: 200px;
overflow: auto;
}
.liLIst {
margin: 0;
box-sizing: border-box;
width: 100%;
height: 25px;
line-height: 25px;
}
.liLIst:hover {
border: 1px solid #ccc;
background-color: #ccc;
}
</style>
<template>
<div class="hello">
<div class="outbox">
<input class="input" type="text" v-model="city.name" @keyup="search(city.name)" @focus="showList=true" >
<div v-show="showList">
<div class="showList" v-if="searchBox">
<ul class="ulList">
<li class="liLIst"
v-for="(a,index) in cityList "
:key= index :value="a.key"
@click="getName(a)"
>{{a.value}}</li>
</ul>
</div>
<div class="showList" v-if="!searchBox">
<ul class="ulList">
<li class="liLIst"
v-for="(a,index) in newcityList "
:key= index :value="a.key"
@click="getName(a)"
>{{a.value}}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
// <searchinput
// :city='cityObj'
// :cityList="cityList">
// </searchinput>
// import dataList from '../assets/mock/mock'
export default {
name: "HelloWorld",
data() {
return {
showList:false,
searchBox:true,//显示那个盒子
// cityList: [],
newcityList:[],//查找出的新数组
};
},
props:{
cityList:{
type:Array,
default:[]
},
city: {
id: "",
name: ""
}
},
computed: {},
watch: {
"city.name": function(a) {
this.city.name = a;
},
"city.id": function(a) {
console.log(this.city)
a ? this.showList = false :''
}
},
methods: {
// 根据当前输入的字符 查找包含的对象
search(a) {
this.newcityList=[]
this.searchBox = false
this.cityList.forEach(city => {
let cityName = city.value.toString()
if(cityName.indexOf(a)!==-1){
this.newcityList.push(city)
// console.log( this.newcityList)
}
});
},
// 点击获取当前value
getName(a) {
this.city.name = a.value;
this.city.id = a.key
}
},
created() {
}
};
</script>