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

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

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

实现方法:

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

关于EasyNVR

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

详细说明:http://www.easydarwin.org/easynvr/

获取更多信息

邮件:support@easydarwin.org

WEB:www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017

EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现的更多相关文章

  1. EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整

    EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权 起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权. 在实际的 ...

  2. EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现

    EasyNVR中有对录像进行检索回放的功能,且先抛开录像的回放,为了更好的用户体验过.让用户方便快捷的找到对应通道对应日期的录像视频,是必须的功能. 基于上述的需求,为前端添加一个日历插件,在日历上展 ...

  3. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)

    在之前的博客<EasyNVR H5流媒体服务器方案架构设计之视频能力平台>中我们描述了EasyNVR的定位,作为一个能力平台来进行功能的输出: 也就是说,在通常情况下,我们将一套视频的应用 ...

  4. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息

    对于动态网站,要实时更新网站的信息,通过接口来获取实时信息是一个必不可少的部分.EasyNVR可以接入IPC等前端设备,必须要实时获取到对应的IPC实时信息进行展示. 本篇主要说明Ajax来获取数据. ...

  5. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息

    上一篇介绍通过接口来获取数据,本篇将介绍如何以分页形式展示出接口获取到的数据 获取到的数据往往会很多,为了追去页面的美观和方便用户的检索,需要进行分页的展示: EasyNVR可接如多通道,当我们的通道 ...

  6. EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现

    在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往就会使用弹窗效果 在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加繁琐, ...

  7. EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位

    EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...

  8. windows平台最简单的rtmp/hls流媒体服务器

    feature: rtmp/hls live server for windows, double click to run,don't need config. run and quit: doub ...

  9. [SRS流媒体]RTMP/HLS 直播服务器simple-rtmp-server安装

    一个采用MIT协议授权的国产的简单的RTMP/HLS 直播服务器,其核心的价值理念在于简单高效. 使用方法: tep 1: build srs tar xf simple-rtmp-server-*. ...

随机推荐

  1. webapi net 直接更改协议头

    1.直接更改协议头 [HttpGet] public HttpResponseMessage Users() { var sites = new object(); string str = tool ...

  2. 使用dvajs+webpack构建react开发环境

    之前我有写过博文介绍过dva.js及其用法,dva.js固然是个非常优秀的框架,但是如果用dev-cli来创建的话就会默认绑定使用roadhog而不是webpack.鉴于roadhog的文档要明显少于 ...

  3. Needle in a haystack: efficient storage of billions of photos 【转】

    转自09年的blog,因为facebook在国内无法访问,故此摘录. The Photos application is one of Facebook’s most popular features ...

  4. 牛客网暑期ACM多校训练营 记录

    所有牛客多校的做题记录请右转队伍wiki Name Date Rank 2018 Multi-University,Nowcoder Day 1 2018.7.19 16/338 5/10 https ...

  5. bzoj 5092: [Lydsy1711月赛]分割序列

    5092: [Lydsy1711月赛]分割序列 Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 219  Solved: 100[Submit][Stat ...

  6. eclipse启动Tomcat时报错:严重: Exception loading sessions from persistent storage

    我的项目工程是Spring+hibernate+structs  1.0,最近启动tomcat时多次遇到如下异常: 严重: IOException while loading persisted se ...

  7. maxwell简单部署使用

    详细资料可以参考maxwell官网  (mysql + maxwell + kafka + elasticsearch) 说明:本文主要是关于配置maxwell监听mysql的数据修改并实时将修改内容 ...

  8. COFF - 中间文件格式解析

    http://www.cnblogs.com/weikanzong/p/5296739.html

  9. Delphi Integer 转成单字节

    整形不能超过256 b:=Byte(StrToInt(n)); var   s: string;   b: Byte; begin   s := Edit1.Text;   b := Byte(Str ...

  10. Mac outlook设置自动回复

    outlook是公司必不可少的软件, 在mac下开发,当然用的是mac版的outlook,今天介绍一下如何设置mac下outlook的自动回复. 有两种方式的帐号,一种是Exchange accoun ...