vue实现前端搜索功能

当数据量不是很大时，可以在前端进行搜索。这里实现基本的搜索功能，可以根据实际情形，再增添功能，将其变复杂。

将下面的代码贴过去，就可以直接体验简单的搜索功能。没有写样式，仅供大家了解实现的逻辑。

界面

界面通常包含最基础的几部分，一是搜索框，二是搜索出的内容的列表展示。这两个基本上是必须。此外，可以再添加取消按钮，即清空你的搜索，等等部分。

<div id="app">
        <!-- 搜索框 -->
        <input 
            type="text" 
            v-model="selectVal"
            placeholder="搜索所在的银行机构" 
            @blur='queryData'
            @input="queryData"
            >
        <button @click="reset()">取消</button>
        <!-- 搜索机构列表 -->
        <div class="org">
            <div v-for="(item,index) in orgList" :key="index">
                {{item}}
            </div>

        </div>
    </div>

数据及逻辑

其实关于搜索的核心代码，其实就是一两句话。思路就是筛选我们的数据列表，将包含关键字的条目，给筛选出来。一般就是filter和indexOf的结合。

核心代码就下面一句

let list=this.orgList.filter(item=>item.indexOf(this.selectVal)>=0);

下面是较详细的代码，包含搜索功能以及搜索重置功能。

var app = new Vue({
            el:'#app',
            data:{
                //orgList:搜索后显示的列表，初始值应该从后台拿取
                orgList:[
                    '江苏银行',
                    '江苏农业银行',
                    '上海银行',
                    '苏州银行',
                    '南京银行',
                    '上海银行贷款部'
                ],
                //全部的数据列表
                normal:[
                    '江苏银行',
                    '江苏农业银行',
                    '上海银行',
                    '苏州银行',
                    '南京银行',
                    '上海银行贷款部'
                ],
                selectVal:''//搜索关键字
            },
            methods:{
                queryData(){
                    //并没有输入关键字时，就不要再搜索了
                    if(this.selectVal===''||this.selectVal==null){
                        this.orgList=JSON.parse(JSON.stringify(this.orgList));
                        return;
                    }
                    //搜索
                    let list=this.orgList.filter(item=>item.indexOf(this.selectVal)>=0);
                    this.orgList=list;
                    
                },
                reset(){
                    this.orgList=JSON.parse(JSON.stringify(this.normal))
                }

            }
        })