advanced search is form

js/search.js

@@ -1,52 +0,0 @@
-// ----------------------------------------------------
-// Search function
-// ----------------------------------------------------
-
-function search_full() {
-    var parameter = [];
-    //get search string
-    var title = document.querySelector("#search input.title").value;
-    if(title != ""){
-        title = title.toLowerCase().replaceAll(" ", "+");
-        parameter.push("title="+title);
-    }
-    //get author
-    var author = document.querySelector("#search input.author").value;
-    if(author != ""){
-        author = author.toLowerCase().split(",").map(s => s.trim()).map(s => s.replaceAll(" ", "+"));
-        parameter.push("authors="+author.join(","));
-    }
-    //get artist
-    var artist = document.querySelector("#search input.artist").value;
-    if(artist != ""){
-        artist = artist.toLowerCase().split(",").map(s => s.trim()).map(s => s.replaceAll(" ", "+"));
-        parameter.push("artists="+artist.join(","));
-    }
-    //get tags
-    var tag = document.querySelector("#search input.tags").value;
-    if(tag != ""){
-        tag = tag.toLowerCase().split(/(?=\+|\-)/).map(s => s.trim()).map(s => s.replaceAll(" ", "+"));
-        parameter.push("tags="+tag.join(","));
-    }
-    //sort
-    var sort = document.querySelector("#content select.sort").value;
-    if(sort != ""){
-        parameter.push("sortby="+sort);
-    }
-    var query = parameter.join("&");
-    return query;
-}
-
-// ----------------------------------------------------
-// Event handlers
-// ----------------------------------------------------
-
-var fields = document.getElementsByTagName("input");
-Array.from(fields).map(field => field.addEventListener("keydown", function (e) {
-    e = e || window.event;
-    if(e.keyCode == 13){
-        e.preventDefault();
-        search_full();
-    }
-}));
-

search.html

@@ -15,35 +15,37 @@
     </div>
 
     <div id="content">
+	<form action="/search.html">
 		<div id="search">
 			<div class="one">
 				<p class="title">Title:</p>
-                <input class="title" type="text" placeholder="Title"></input>
+				<input class="title" type="search" name="title" placeholder="Title"></input>
 			</div>
 
 			<div class="two">
 				<p class="artist">Artist:</p>
-                <input class="artist" type="text" placeholder="Artist"></input>
+				<input class="artist" type="search" name="artist" placeholder="Artist"></input>
 
 				<p class="author">Author:</p>
-                <input class="author" type="text" placeholder="Author">
+				<input class="author" type="search" name="author" placeholder="Author">
 			</div>
 
 			<div class="three">
 				<p class="tags">Tags:</p>
-                <input class="tags" type="text" placeholder="Tags"></input>
+				<input class="tags" type="search" name="tags" placeholder="Tags"></input>
 
 			</div>
 			<div class="four">
 				<p class="sort">Sort:</p>
-                <select class="sort">
+				<select name="sort" class="sort">
 					<option value="name">name</option>
 					<option value="date">date</option>
 					<option value="status">status</option>
 				</select>
 			</div>
-            <button onclick="load_results();">Search</button>
+			<button type="submit">Search</button>
 		</div>
+	</form>
 
         <h2 id="label"></h2>
 
@@ -70,15 +72,15 @@
     </div>
 
 
-    <script type="text/javascript" src="js/search.js"></script>
     <script type="text/javascript" src="js/title_list.js"></script>
+    <script type="text/javascript" src="js/search.js"></script>
     <script>
         var prefix = "https://amangathing.ddns.net/instance/manga/search?";
 
         document.onreadystatechange = function () {
             var query = search_full()
             if(query != ""){
-                console.log("on search", query);
+                console.log("on load", query);
                 load_titles(prefix+query);
                 document.querySelector("#title_list").style.visibility = "visible";
                 document.querySelector("#label").textContent = "Result";