注意:
这是一个精确查找的搜索功能,不适合半匹配搜索!
在components 中建一个hello.vue组件
<template>
<div>
<el-col :span="4">
<el-input @focus="foucs" type="text" v-model="search" placeholder="请输入您现在所在的位置"/>
</el-col>
<el-popover
placement="bottom"
width="200"
content="抱歉,您搜索的内容不存在, 请重新输入"
trigger="manual"
v-model="visible">
<el-button slot="reference" @click="SearchClick">搜索</el-button>
</el-popover>
<div
v-if="dataList.length>0"
:num="num"
>
<div v-for="(item, index) in dataList" :key="index">
<el-col :span="2">{
{item.id}}</el-col>
<el-col :span="6">{
{item.name}}</el-col>
<el-col :span="6">{
{item.localtion}}</el-col>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
visible: false,
num: true,
search: '',
dataList: []
}
},
methods: {
SearchClick () {
// 清空上次搜索的内容
this.dataList.length = 0
if (this.search !== '' & this.dataList.length >= 0) {
this.getdata.filter((item, index) => {
if (item.name.indexOf(this.search) !== -1) {
this.dataList.push(item)
}
})
// 清空搜索框
this.search = ''
this.visible = false
} else {
this.visible = true
return false
}
},
foucs () {
this.visible = false
}
},
computed: {
getdata () {
return this.$store.state.datashow
}
}
}
</script>
<style scoped>
</style>
建一个store 目录 下面建一个index.js,做一个仓库存放内容
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
datashow: [
{
id: '1', name: '毕节市七星关区', localtion: '李淑美'},
{
id: '2', name: '纳雍县', localtion: '何宇航'},
{
id: '3', name: '赫章县', localtion: '刘龙'},
{
id: '4', name: '威宁县', localtion: '王文刚'},
{
id: '5', name: '大方县', localtion: '列里'},
{
id: '6', name: '金沙县', localtion: '真凤英'},
{
id: '7', name: '黔西县', localtion: '王先会'}
]
},
mutations: {
getdata (state, data) {
this.state = data
}
},
getters: {
}
})
效果样式如下:
不输入任何内容,点击搜索
输入正确的内容
基本就这样了,如果感兴趣的兄弟可以拿走,写一个后台服务器,连接到数据库就成型了