EasyNVR RTSP轉RTMP-HLS流媒體伺服器前端建構之：内部搜尋功能的實作

上一篇介紹了處理接口擷取的資料，本篇将介紹如何在接收到的資料中搜尋出自己符合條件的資料；

為了頁面的美觀，我們往往會以分頁的形式來進行資料的展示。但是，當需要展示出來的資料太多的時候，我們很難迅速的找出自己想要的資料。自時候，我們就需要通過檢索功能來實作對想要的資料的查找；

頁面内的搜尋一般多為通過搜尋框來檢索出自己想要的内容；

實作方法：

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/

擷取更多資訊

郵件：[email protected]

WEB：www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017