filter channels

script/public/index.html

@@ -30,7 +30,9 @@
        target="_blank">LinkedIn</a>
     <div class="row" style="margin-top: 40px;">
         <div class="col-xs-4 col-md-4">
-            <div class="list-group channels-list"></div>
+            <input id="searchInput" class="form-control" type="text" onkeyup="filterChannelsList()"
+                   placeholder="Search..." style="margin-bottom: 1px">
+            <div id="channel-list" class="list-group channels-list"></div>
         </div>
         <div class="col-xs-8 col-md-8">
             <div id="video">

script/public/index.js

@@ -174,6 +174,24 @@ function checkIfWebsiteWorks(sUrl){
     });
 }
 
+function filterChannelsList() {
+    var input, filter, div, li, a, i, txtValue;
+
+    input = document.getElementById("searchInput");
+    filter = input.value.toUpperCase();
+    div = document.getElementById("channel-list");
+    elements = div.getElementsByTagName("a");
+
+    for (i = 0; i < elements.length; i++) {
+        txtValue = elements[i].textContent || elements[i].innerText;
+        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+            elements[i].style.display = "";
+        } else {
+            elements[i].style.display = "none";
+        }
+    }
+}
+
 function onChannelClick(channel){
     channel = JSON.parse(channel);
     reproduceVideo(channel['options'][0]['url'])