首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyNVR RTSP转RTMP/HLS流媒体服务器前端构建之:内部搜索功能的实现

EasyNVR RTSP转RTMP/HLS流媒体服务器前端构建之:内部搜索功能的实现

作者头像
EasyNVR
发布2020-04-23 15:45:23
7310
发布2020-04-23 15:45:23
举报
文章被收录于专栏:EasyNVREasyNVR

上一篇介绍了处理接口获取的数据,本篇将介绍如何在接收到的数据中搜索出自己符合条件的数据; 为了页面的美观,我们往往会以分页的形式来进行数据的展示。但是,当需要展示出来的数据太多的时候,我们很难迅速的找出自己想要的数据。自时候,我们就需要通过检索功能来实现对想要的数据的查找;

页面内的搜索一般多为通过搜索框来检索出自己想要的内容; 实现方法:

1.给搜索框绑定一个触发事件

HTML代码


 <div class="box-header">
    <h4 class="text-success text-center">通道列表</h4>
    <div class="form-inline">
       <input type="text" class="form-control pull-right" placeholder="搜索" id="search" onkeyup="searchChannel()" >
    </div>
 </div>

将searchChannel方法绑定到onkeyup事件上;

2.通过触发事件来触发搜索方法

JS代码


function searchChannel(){
        var inputValue = $("#search").val();
        $.get(_url + "/getchannels").then(
            function(data){
                try{
                    var ret = JSON.parse(data);
                    ret.EasyDarwin.Body.Channels.sort(function (a, b) {
                        return parseInt(a["Channel"]) - parseInt(b["Channel"]);
                    })
                    var ports = ret.EasyDarwin.Body.Channels;
                    $.each(ports,function(i,channel){
                        channel['alias'] = channel.Name+channel.Channel;//添加属性值alias'
                    })
                    ports = ports.filter(function(val,idx,array){
                        return new RegExp(inputValue,"i").test(val.alias);
                    })
                    renderPortPage(ports);
                }catch(e){
                    console.log(e);
                }
            }
        );
}  

通过filter()函数来对需要检索的原始数据进行筛选; filter用于筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 filter(expr|obj|ele|fn)

exprString  字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery objectobject  现有的jQuery对象,以匹配当前的元素。
element Expression  一个用于匹配元素的DOM元素。 
function(index) Function  一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

通过filter进行处理筛选后的数组不会改变原有的数组结构;使用filter来过滤出符合搜索框输入条件的元素;然后再将过滤搜索出来的元素来进行分页展示或是根据具体的业务需求来进行相对应的处理。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档