element 搜索匹配_类似element中select 框带搜索功能（前端实现搜索）

uniapp也是第一次接触，效果图：

上代码：

ref="searchInp"

@input="filterRegion"

@blur="hideSearch"

@click="flag = true"/>

@click="handleRegion(item)"

v-for="item in searchVal"

>{{ item.region_name }}

--无匹配数据--

export default {

data() {

return {

flag: false,

search_loading: false,

searchVal: [],

region: {

name: '',

id: ''

},

list:[

{region_name: '池州', region_id: 10001},

{region_name: '惠州', region_id: 10001},

{region_name: '徽州', region_id: 10001},

{region_name: '凉州', region_id: 10001},

{region_name: '常州', region_id: 10001},

{region_name: '苏州', region_id: 10001},

{region_name: '京州', region_id: 10001},

{region_name: '永州', region_id: 10001}

]

}

},

props: {

},

created() {

this.searchVal = this.list;

},

methods:{

handleRegion(item) {

this.region.name = item.region_name;

this.region.id = item.region_id;

this.flag = false;

this.$emit("getRegion", this.region);

},

hideSearch() {

setTimeout(() => {

this.flag = false;

},300)

},

filterRegion() {

let ziduan = this.region.name;

let rows = [];

this.search_loading = true;

rows = this.list.filter(item => {

if(item.region_name.indexOf(ziduan) != -1){

return item

}

})

if(ziduan.length > 0 ){

this.searchVal = rows;

this.search_loading = false;

}else{

this.searchVal = this.list;

this.search_loading = false;

}

}

}

}

.popup{

padding: 8px 0;

position: absolute;

top: 10vh;

z-index: 99;

transition: all 1s ease-in;

.sanjiao{

display: block;

width: 8px;

height: 8px;

background-color: #fff;

position: absolute;

top: -4px;

left: 30px;

transform: rotate(45deg);

}

.not-data{

width: 80vw;

border-radius: 5px;

line-height: 60rpx;

text-align: center;

background-color: #fff;

margin-top: -8px;

box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);

color: #666;

font-size: 24rpx;

}

.search{

width: 80vw;

max-height: 50vh;

overflow: hidden;

overflow-y: auto;

background-color: #fff;

border-radius: 5px;

margin-top: -8px;

box-shadow: 0 -2px 12px 0 rgba(0,0,0,.1);

.o-li{

display: block;

line-height: 60rpx;

padding: 0 5px;

&:after{

content: "";

display: block;

width: 100%;

height: 1px;

background-color: #eee;

transform: scaleY(0.5);

}

}

.search-loading{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

}

}

注意项： 如果要写成组件，在小程序中是不支持props中的值直接修改的，处理办法是 直接在组件内部增加一个对象，来替换props的值；