Merge pull request #1315 from MrD-RC/search-targets

Added search box for targets

src/css/tabs/firmware_flasher.css

@@ -262,3 +262,17 @@
     text-shadow: none;
     opacity: 0.5;
 }
+
+.tab-firmware_flasher .target_search {
+    padding-left: 3px;
+    width: 295px;
+    height: 20px;
+    line-height: 20px;
+    text-align: left;
+    border: 1px solid silver;
+    border-radius: 3px;
+    margin-right: 11px;
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: normal;
+}

tabs/firmware_flasher.html

@@ -4,7 +4,8 @@
             <div class="spacer">
                 <table class="cf_table" style="margin-top: 10px;">
                     <tr>
-                        <td><select name="board">
+                        <td><input class="target_search" placeholder="Search targets..." autocomplete="on"><br />
+                            <select name="board" id="board_targets">
                                 <option value="0">Loading ...</option>
                         </select></td>
                         <td><span class="description" i18n="firmwareFlasherOnlineSelectBoardDescription"></span></td>

tabs/firmware_flasher.js

@@ -53,8 +53,25 @@ TABS.firmware_flasher.initialize = function (callback) {
             buildBoardOptions();
         });
 
-        var buildBoardOptions = function(){
+        $('.target_search').on('input', function(){
+            var searchText = $('.target_search').val().toLocaleLowerCase();
+
+            $('#board_targets option').each(function(i){
+                var target = $(this);
+                //alert("Comparing " + searchText + " with " + target.text());
+                if (searchText.length > 0 && i !== 0) { 
+                    if (target.text().toLowerCase().includes(searchText)) {
+                        target.show();
+                    } else {
+                        target.hide();
+                    }
+                } else {
+                    target.show();
+                }
+            });
+        });
 
+        var buildBoardOptions = function(){
             var boards_e = $('select[name="board"]').empty();
             var showDevReleases = ($('input.show_development_releases').is(':checked'));
             boards_e.append($("<option value='0'>{0}</option>".format(chrome.i18n.getMessage('firmwareFlasherOptionLabelSelectBoard'))));