博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现
阅读量:4330 次
发布时间:2019-06-06

本文共 1929 字,大约阅读时间需要 6 分钟。

上一篇介绍了处理接口获取的数据,本篇将介绍如何在接收到的数据中搜索出自己符合条件的数据;

为了页面的美观,我们往往会以分页的形式来进行数据的展示。但是,当需要展示出来的数据太多的时候,我们很难迅速的找出自己想要的数据。自时候,我们就需要通过检索功能来实现对想要的数据的查找;

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

实现方法:

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

HTML代码


通道列表

将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来过滤出符合搜索框输入条件的元素;然后再将过滤搜索出来的元素来进行分页展示或是根据具体的业务需求来进行相对应的处理。

关于EasyNVR

EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;

详细说明:

获取更多信息

邮件:

WEB:

Copyright © EasyDarwin.org 2012-2017

EasyDarwin

转载于:https://www.cnblogs.com/babosa/p/7553169.html

你可能感兴趣的文章
iOS语言中的KVO机制
查看>>
excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法
查看>>
响应式web设计之CSS3 Media Queries
查看>>
实验三
查看>>
机器码和字节码
查看>>
环形菜单的实现
查看>>
【解决Chrome浏览器和IE浏览器上传附件兼容的问题 -- Chrome关闭flash后,uploadify插件不可用的解决办法】...
查看>>
34 帧动画
查看>>
二次剩余及欧拉准则
查看>>
Centos 7 Mysql 最大连接数超了问题解决
查看>>
thymeleaf 自定义标签
查看>>
关于WordCount的作业
查看>>
C6748和音频ADC连接时候的TDM以及I2S格式问题
查看>>
UIView的layoutSubviews,initWithFrame,initWithCoder方法
查看>>
STM32+IAP方案 实现网络升级应用固件
查看>>
用74HC165读8个按键状态
查看>>
jpg转bmp(使用libjpeg)
查看>>
linear-gradient常用实现效果
查看>>
sql语言的一大类 DML 数据的操纵语言
查看>>
VMware黑屏解决方法
查看>>