Add pre-filled search on package page (#358)

.htaccess

@@ -52,6 +52,6 @@ Redirect temp /Packages/Authors/authors.html /packages/authors
 Redirect temp /Packages/Authors/pkgauthorhints.html /packages/authors
 Redirect temp /Packages/Authors/variablenames.html /packages/authors/variablenames
 Redirect temp /Packages/packages.html /packages
-RedirectMatch temp "^/Packages/(.*).html$" "/packages/?q=$1"
+RedirectMatch temp "^/Packages/(.*).html$" "/packages/#$1"
 
 RedirectMatch temp "^/Releases(/|$)(.*)" /install

assets/js/loadPackageTable.js

@@ -101,6 +101,24 @@ function convertDateFormat(dateStr) {
 // should sort date column, does not work
 DataTable.render.datetime('YYYY-MM-DD');
 
+// pre-fill search field and sync with URL
+function auto_search($dt){
+    var $api = $dt.api();
+
+    // Set the search text in the URL hash whenever a search is executed
+    $api.on( 'search.dt', function () {
+        window.location.hash = $api.search();
+    } );
+
+    // See if a search string is set in the URL hash, if so, execute a DT search
+    var search_str = window.location.hash.substring(1);
+
+    // Filter on load if theres anything in the hash
+    if(search_str) {
+        $api.search( search_str ).draw();
+    }
+}
+
 // define a table
 let table = new DataTable('#packageList', {
     // get the json file
@@ -138,15 +156,14 @@ let table = new DataTable('#packageList', {
     language: {
         search: 'Search table:'
     },
+    searchHighlight: true,
+    initComplete: function( settings, json ) {
+        auto_search(this);
+    },
     // set default number of packages shown
     pageLength: 25,
 });
 
-const urlParams = new URLSearchParams(window.location.search);
-if (urlParams.has('q')) {
-    table.search(urlParams.get('q'));
-}
-
 // Add event listener for opening and closing details
 table.on('click', 'td.dt-control', function (e) {
     let tr = e.target.closest('tr');