This adds a dedicated "Search" button to the UI for simple viewer.

Addresses issues #78 & #98
A listener for search input doesn't work well
with language input methods which convert
words into kanji or Chinese characters.
This adds a dedicated search button and
ensures that the previous & next buttons
are shown and hidden as required.
It also prints out better syntax for the search
information.

examples/simple-viewer/index.html

@@ -84,8 +84,9 @@
 			size="40"
 			placeholder="Search..."
 		>
-		<button onclick="run_search(-1, 1)">Prev</button>
-		<button onclick="run_search(1, 1)">Next</button>
+        <button onclick="run_search(1,0)">Search</button>
+		<button id="searchPrevious" style="display:none;" onclick="run_search(-1, 1)">Previous</button>
+		<button id="searchNext" style="display:none;" onclick="run_search(1, 1)">Next</button>
 		<div id="search-status" style="flex-grow:1"></div>
 		<button onclick="hide_search_panel()">X</button>
 	</footer>

examples/simple-viewer/viewer.js

@@ -584,10 +584,6 @@ let search_input = document.getElementById("search-input")
 var current_search_needle = ""
 var current_search_page = 0
 
-search_input.oninput = function (event) {
-	run_search(event.shiftKey ? -1 : 1, 0)
-}
-
 function show_search_panel() {
 	if (!page_list)
 		return
@@ -616,6 +612,12 @@ function set_search_needle(needle) {
 }
 
 async function run_search(direction, step) {
+
+    // this means the main search button was pressed (not previous or next)
+    // we don't know if there are any hits so hide the previous & next buttons
+    if (direction == 1 && step == 0) {
+        showPreviousAndNext(false)
+    }
 	// start search from visible page
 	set_search_needle(search_input.value)
 
@@ -642,7 +644,13 @@ async function run_search(direction, step) {
 		if (hits && hits.length > 0) {
 			page_list[next_page].rootNode.scrollIntoView()
 			current_search_page = next_page
-			search_status.textContent = `${hits.length} hits on page ${next_page}.`
+            showPreviousAndNext(true)
+
+            var word = "hits"
+            if (hits.length == 1) {
+                word = "hit"
+            }
+			search_status.textContent = `${hits.length} ${word} on page ${next_page+1}.`
 			return
 		}
 
@@ -690,6 +698,7 @@ function hide_outline_panel() {
 // DOCUMENT LOADING
 
 function close_document() {
+    showPreviousAndNext(false)
 	clear_message()
 	hide_outline_panel()
 	hide_search_panel()
@@ -707,6 +716,17 @@ function close_document() {
 	page_list = null
 }
 
+function showPreviousAndNext(show) {
+    if (show) {
+        document.getElementById("searchPrevious").style.display = "block";
+        document.getElementById("searchNext").style.display = "block";
+    } else {
+        document.getElementById("searchPrevious").style.display = "none";
+        document.getElementById("searchNext").style.display = "none";
+    }
+
+}
+
 async function init_document(title) {
 	document.title = await worker.documentTitle(current_doc) || title