_www: wrap the search input field with form element

This is to allow user to trigger search by pressing Enter key on the
text input field without clicking button Search.

While at it, display information when no matched records found on search.

1 files changed, 18 insertions, 6 deletions

diff --git a/_www/index.html b/_www/index.html
index f4fb76b..1141e2f 100644
--- a/_www/index.html
+++ b/_www/index.html
@@ -61,12 +61,14 @@
 			/
 			<a href="/zone.d/"> zone.d </a>
 		</nav>
-		<div class="search">
-			Caches:
-			<input name="query" />
-			<button onclick="doSearch()">Search</button>
-			<button onclick="doClearResult()">Clear result</button>
-		</div>
+		<form id="form_search">
+			<div class="search">
+				Caches:
+				<input name="query" />
+				<button onclick="doSearch()">Search</button>
+				<button onclick="doClearResult()">Clear result</button>
+			</div>
+		</form>
 		<div id="result"></div>
 		<div id="notif"></div>
 
@@ -96,6 +98,11 @@
 				}
 				renderCaches(res.data)
 				cachePoller = setInterval(pollCaches, 10000)
+
+				// Catch the enter key on input text search.
+				document.getElementById("form_search").addEventListener("submit", e => {
+					e.preventDefault();
+				})
 			}
 
 			async function pollCaches() {
@@ -126,6 +133,11 @@
 				const elResult = document.getElementById("result")
 				elResult.innerHTML = ""
 
+				if (dnsRecords.length === 0) {
+					elResult.innerHTML = "<div>No matches record found.</div>"
+					return
+				}
+
 				for (let x = 0; x < dnsRecords.length; x++) {
 					const record = dnsRecords[x]
 					const divRecord = document.createElement("div")