简单的 前端模糊查询

<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>