<template>
<div class="page-search">
<mt-search autofocus v-model="value" placeholder="搜索"> </mt-search>
<mt-cell
v-for="item of filterResult"
:key="item"
:title="item"
@click.native="select(item)"
/>
</div>
</template>
<script>
export default {
name: "page-search",
data() {
return {
value: "",
// 默认数据
defaultResult: [
"Apple",
"Banana",
"Orange",
"Durian",
"Lemon",
"Peach",
"Cherry",
"Berry",
"Core",
"Fig",
"Haw",
"Melon",
"Plum",
"Pear",
"Peanut",
"Other"
]
};
},
methods: {
select(item) {
console.log(item);
console.log(this.$router);
this.$router.go(-1);
}
},
mounted() {
this.$nextTick(() => {
document.querySelector(".mint-search").style.height =
document.querySelector(".mint-searchbar").offsetHeight + "px";
});
},
computed: {
filterResult() {
return this.defaultResult.filter(value =>
new RegExp(this.value, "i").test(value)
);
}
}
};
</script>
<style lang="scss">
input[type="search"] {
color: #333;
font-size: 16px;
}
input[type="search"]::-webkit-input-placeholder {
color: #666;
font-size: 16px;
}
input[type="search"]:-moz-placeholder {
color: #666;
font-size: 16px;
}
input[type="search"]::-moz-placeholder {
color: #666;
font-size: 16px;
}
input[type="search"]:-ms-input-placeholder {
color: #666;
font-size: 16px;
}
</style>
效果图