table_search: Adding clear button

Author: protitude

js/table_search.js

@@ -5,9 +5,33 @@
         var $ts = $(elem);
         var tableId = $ts.next().attr('id');
         var inputId = 'searchtable-' + i;
-        $ts.before('<label for="' + inputId + '"><strong>Enter keyword to search </strong></label><input id="' + inputId + '" type="search" autosave="csrsearch" results="1" placeholder="search" name="s">');
-        $('#' + inputId).keyup(function () {
-          searchTable($(this).val(), tableId);
+        var clearId = 'clear-' + inputId;
+        $ts.before('<div style="position: relative; width: fit-content;"><label for="' + inputId + '"><strong>Enter keyword to search </strong></label><input id="' + inputId + '" autosave="csrsearch" results="1" placeholder="search" name="s"><a href="#" id="' + clearId + '" class="search-clear" style="display:none; position: absolute; right: 5px; top: 2px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34" class="svg-icon x-skinny" width="10"><use fill="#000" xlink:href="/sites/default/files/svg/sprite_8.svg#x-skinny"></use></svg><span style="position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;">Clear</span></a></div>');
+
+        var $input = $('#' + inputId);
+        var $clear = $('#' + clearId);
+
+        $input.keyup(function (e) {
+          var val = $(this).val();
+
+          // Check if Escape key was pressed
+          if (e.key === 'Escape' || e.keyCode === 27) {
+            $(this).val('');
+            searchTable('', tableId);
+            $clear.hide();
+            return;
+          }
+
+          searchTable(val, tableId);
+          $clear.toggle(val.length > 0);
+        });
+
+        $clear.click(function (e) {
+          e.preventDefault();
+          $input.val('');
+          searchTable('', tableId);
+          $clear.hide();
+          $input.focus();
         });
 
         if ( $( ".page-node-1485" ).length ) {
@@ -16,11 +40,13 @@
           $ts.prev('.cat_search').change(function () {
             var selection = this.value;
             if (selection) {
-              $('#' + inputId).val(selection);
+              $input.val(selection);
               searchTable(selection, tableId);
+              $clear.show();
             } else {
-              $('#' + inputId).val('');
+              $input.val('');
               searchTable(selection, tableId);
+              $clear.hide();
             }
           }).change();
         }