首先创建一个input框,用v-model双向数据绑定,方便获取input框的value值
<div class="home">
<input type="text" placeholder="请输入城市名称" v-model="inputValue" @input="searchValue()" @keyup="searchValue_2($event)" />
<div v-for="item in listValue" :key="item.id" ref="onList" @click="changeList(item.name)">
{{item.name}}
</div>
</div>
js
export default {
data(){
return {
inputValue: '',
listValue: [],
list: [
{
id: 1,
name: '苹果'
},
{
id: 2,
name: '苹苹'
},
{
id: 3,
name: '梨'
},
{
id: 4,
name: '葡萄'
},
{
id: 5,
name: '果苹'
},
]
}
},
mounted() {
},
methods: {
searchValue() {
if(this.inputValue == ''){
this.listValue == ''
return
}
this.listValue = this.list.filter(value => value.name.indexOf(this.inputValue) != -1)
},
searchValue_2(ev) {
//键盘事件
if (ev.keyCode == 38){
// up
this.current --;
if(this.current <= 0) {
this.current = 0;
}
}else if(ev.keyCode == 40) {
//down
this.current ++;
if(this.current >= this.listValue.length) {
this.current = this.listValue.length -1;
}
}else if(ev.keyCode == 13) {
//enter
console.log('enter');
this.inputValue = this.listValue[this.current].name
}
//up down键选中状态背景颜色改变
this.listValue.forEach((item, index) => {
if (index == this.current) {
this.$refs.onList[index].style.background = '#ccc'
}else {
this.$refs.onList[index].style.background = '#fff'
}
})
},
//选中
changeList (value) {
this.inputValue = value
}
}
}