Redesign domain search input field (#2957)

scripts/pi-hole/js/search.js

@@ -19,11 +19,13 @@ $(function () {
   }
 });
 
-function eventsource(partial) {
+function doSearch() {
   const ta = $("#output");
   // process with the current visible domain input field
   const q = $("input[id^='domain']:visible").val().trim().toLowerCase();
   const N = $("#number").val();
+  // Partial matching?
+  const partial = $("#partialMatch").is(":checked");
 
   if (q.length === 0) {
     return;
@@ -197,17 +199,11 @@ function eventsource(partial) {
 $("#domain").on("keypress", function (e) {
   if (e.which === 13) {
     // Enter was pressed, and the input has focus
-    eventsource(false);
+    doSearch();
   }
 });
 
 // Handle search buttons
-$("button[id^='btnSearch']").on("click", function () {
-  var partial = false;
-
-  if (!this.id.match("^btnSearchExact")) {
-    partial = true;
-  }
-
-  eventsource(partial);
+$("button[id='btnSearch']").on("click", function () {
+  doSearch();
 });

search.lp

@@ -17,21 +17,29 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
     <div class="col-md-12">
         <div class="box">
             <div class="box-header">
-                <!-- domain-search-block - Single search field mobile/desktop -->
                 <div id="domain-search-block" class="input-group">
                     <input id="domain" type="url" class="form-control" placeholder="Domain to look for (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     <input id="quiet" type="hidden" value="no">
                     <span class="input-group-btn">
-                        <button type="button" id="btnSearch" class="btn btn-default">Search partial match</button>
-                        <button type="button" id="btnSearchExact" class="btn btn-default">Search exact match</button>
+                        <button type="button" id="btnSearch" class="btn btn-default">Search</button>
                     </span>
                 </div>
             </div>
             <div class="box-body">
-                <!-- /domain-search-block -->
-                <div id="limitbox-block" class="form-inline">
-                    <input class="form-control input-sm" type="number" min="0" value="20" id="number">
-                    <label for="number">Maximum of results to be returned</label>
+                <div class="row">
+                    <div class="col-md-4">
+                        <div>
+                            <input type="checkbox" id="partialMatch" data-key="partialMatch">
+                            <label for="partialMatch"><strong>Use partial matching</strong></label>
+                        </div>
+                    </div>
+                    <br class="hidden-md hidden-lg">
+                    <div class="col-md-8">
+                        <div id="domain-limitbox-block" class="form-inline">
+                            <label for="number">Maximum number of results to be returned:&nbsp;</label>
+                            <input class="form-control input-sm" type="number" min="0" value="20" id="number">
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

style/pi-hole.css

@@ -562,19 +562,6 @@ td.details-control {
 }
 
 @media screen and (max-width: 991px) {
-  #domain-search-block {
-    display: block;
-  }
-  #domain {
-    margin: 5px 0;
-  }
-  #domain-search-block .input-group-btn {
-    display: inline-block;
-  }
-  #domain-search-block .input-group-btn button {
-    margin: 0 5px 0 0;
-    border-radius: 3px;
-  }
   .settings-container {
     --number-of-columns: 1;
   }
@@ -1478,3 +1465,14 @@ table.dataTable tbody > tr > .selected {
   overflow-wrap: break-word;
   inline-size: auto;
 }
+
+/* Search page options */
+#domain-limitbox-block {
+  /* Add margin to match the other component (icheck) height */
+  margin: 3px 0;
+}
+@media (min-width: 992px) {
+  #domain-limitbox-block {
+    text-align: right;
+  }
+}