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))
                }

            }
        })