模糊搜索

一、前言

做项目中经常遇到通过搜索框输入内容去查询一些东西，为了更好的用户体验，经常会有模糊查询到需求。对于模糊搜索，我有两种理解：一是不需要输入完整的内容就可以搜索出相关的结果；二是通过输入的内容给用户一个联想提示，类似于百度搜索时的那种效果。二者可以同时做到。对于输入内容就可以将相关结果展示出来，这个主要是靠后台去完成，前端只需要将用户输入的内容作为参数传给后端即可，所以这篇文章主要讲的是联想搜索。

二、组件

以vue＋Element UI来实现这个功能
el-autocomplete是专门用来处理模糊搜索的组件，属于el-input范畴

<template>
    <div class="_fuzzy_search">
        <h1>模糊搜索</h1>
        <el-autocomplete v-model="input" placeholder="请输入内容" :fetch-suggestions="queryName"></el-autocomplete>
    </div>
</template>

三、方法

	data () {
        return {
            input: '',
            restaurants: []
        }
    },
    methods: {
        loadAll () {
            //这里在实际项目中应该是从后台获取所有的数据
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" }
            ]
        },
        queryName (string,cb) {
            var restaurants = this.restaurants
            var result = string?restaurants.filter(this.createInputFilter(string)):restaurants
            cb(result)
        },
        //对数据进行去重
        createInputFilter (string) {
            return (input) => {
                return (input.value.toLowerCase().indexOf(string.toLowerCase()) === 0)
            }
        }
    },
    mounted() {
        this.restaurants = this.loadAll()
    }

四、结果