vue实现前端搜索功能

2019/7/29 15:20:40 人评论 次浏览 分类:vue.js

广告开始--------------------------

全网最全17套vue.js视频教程

文件格式:视频      大小:160G左右

预览网址:【直接浏览网址即可】http://nicethemes.cn/product/view14.html

从入门到精通全套vue.js实战视频教程。

广告结束--------------------------

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

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

界面

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

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

            }
        })

 

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->