feat(search): Add event listerners to 'refine search' form #289

* add values and names to checkboxes
* add IDs and class names to forms
* get values of checkboxes as parameters on submitting the query

pages/search/filter-querystring-include.html

@@ -1,19 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <div class="row">
-    <div class="hsg-width-one-whole" data-template="app:fix-links">
+    <div class="hsg-width-one-whole">
         <div class="hsg-search-inputs-horizontal">
-            <div class="hsg-search-input">
-                <input id="exactPhrase" type="checkbox" name="" />
-                <label for="exactPhrase" class="c-indicator">Exact Phrase</label>
-            </div>
-            <div class="hsg-search-input">
-                <input id="caseSensitive" type="checkbox" name="" />
-                <label for="caseSensitive" class="c-indicator">Case Sensitive</label>
-            </div>
-            <div class="hsg-search-input">
-                <input id="punctuationSensitive" type="checkbox" name="" />
-                <label for="punctuationSensitive" class="c-indicator">Punctuation Sensitive</label>
-            </div>
+            <form class="filter-form" id="queryFilters" action="?">
+                <div class="hsg-search-input">
+                    <input id="exactPhrase" type="checkbox" name="match" value="exact_phrase" />
+                    <label for="exactPhrase" class="c-indicator">Exact Phrase</label>
+                </div>
+                <div class="hsg-search-input">
+                    <input id="caseSensitive" type="checkbox" name="match" value="case_sensitive" />
+                    <label for="caseSensitive" class="c-indicator">Case Sensitive</label>
+                </div>
+                <div class="hsg-search-input">
+                    <input id="punctuationSensitive" type="checkbox" name="match" value="punctuation_sensitive" />
+                    <label for="punctuationSensitive" class="c-indicator">Punctuation Sensitive</label>
+                </div>
+            </form>
         </div>
     </div>
 </div>

pages/search/search-bar-include.html

@@ -7,7 +7,7 @@ <h1>Search</h1>
                 limitations of this search engine and how to make the most of its scope,
                 phrase, boolean, wildcard, and proximity options.
             </p>
-            <form method="get" action="$app/search" class="search-page-form" id="search-form">
+            <form method="get" action="$app/search" class="main-form" id="searchForm">
                 <p class="form-group searchbox">
                     <label for="q" class="sr-only">Search</label>
                     <input type="search" name="q" class="form-control" id="q" data-template="templates:form-control"/>
@@ -16,7 +16,6 @@ <h1>Search</h1>
                         <i class="hsg-search-icon"></i>
                     </button>
                 </p>
-
 <!--
                 <button class="hsg-link-button" type="submit" value="Search">
                     <span class="glyphicon glyphicon-search" aria-hidden="true"/>Search

pages/search/search-result.html

@@ -16,6 +16,8 @@
 
     <div data-template="templates:include" data-template-path="pages/search/search-bar-include.html"/>
 
+    <div data-template="templates:include" data-template-path="pages/search/filter-querystring-include.html"/>
+
     <div class="row">
         <nav class="hsg-width-one-third">
             <div class="hsg-search-inputs-vertical">

resources/scripts/app.js

@@ -92,6 +92,36 @@ $(document).ready(function() {
         });
     }
 
+    var searchForm = $('#searchForm');
+    var queryForm = $('#queryFilters');
+
+    /**
+     * return serialized values of checked filters in filterForm with name
+     * @param {String} name
+     * @returns {String}
+     */
+    function serializeFiltersByName (form, name) {
+        var filter = form.serialize();
+        if (filter === '') { return ''; }
+        return '&' + filter;
+    }
+
+    /**
+     * reload page with all filters added as GET-parameters
+     * @param {Event} event
+     */
+    function submitSearch (event) {
+        event.preventDefault();
+        var action = searchForm.serialize();
+        action += serializeFiltersByName(queryForm, 'match');
+        window.location.replace('?' + action);
+    }
+
+    if (searchForm.get(0)) {
+        searchForm.on('submit', submitSearch);
+        queryForm.find('input').on('change', submitSearch);
+    }
+
     function initContent() {
         $(".content .note").popover({
             html: true,