add extra callbacks

search.js

@@ -1,73 +1,71 @@
+const HEADERS = "headers"
+const PATH = "path"
+const TAGS = "tags"
+const TITLE = "title"
+
 const fuse = new Fuse(data, {
-  keys: ['path', 'title', 'tags', 'headers'],
+  keys: [ HEADERS, PATH, TAGS, TITLE ],
   includeMatches: true
 })
 
 const searchBar = document.getElementById('search')
+const resultsMax = document.getElementById('resultsMax')
 const results = document.getElementById('results')
 
 function callback() {
-  console.log("called")
-  console.log(searchBar.value)
   results.innerHTML = ''
-  fuse.search(searchBar.value).forEach(r => {
-    console.log(r)
+  fuse.search(searchBar.value).slice(0, parseInt(resultsMax.value)).forEach(r => {
     wrapper = document.createElement('div')
     wrapper.className = "article"
 
-    extra_info = document.createElement('p')
-    extra_info.className = "smallText"
-    extra_info.innerHTML = "tags: "
-    if (r.item.tags == null) {
-      extra_info.innerHTML += "none"
-    } else {
-      extra_info.innerHTML += "[" + r.item.tags.join(', ') + ']'
-    }
-    extra_info.innerHTML += ' path: ' + r.item.path
-
-    header_matches_p = document.createElement('p')
-    header_matches_p.className = "smallText"
-    header_matches = []
+    display_matches = {}
+    display_matches[HEADERS] = []
+    display_matches[PATH] = []
+    display_matches[TAGS] = []
+    display_matches[TITLE] = []
 
     r.matches.every(match => {
-      if (header_matches.length > 3) {
-        header_matches.push('...')
+      if (display_matches[match.key].length > 3) {
+        display_matches[match.key].push('...')
         return false
       }
 
-      if (match.key === "headers") {
-        display_match = match.value
-        if (match.indices.length >= 1) {
-          match.indices.sort((a, b) => (b[1]-b[0])-(a[1]-a[0]))
-          indexPair = match.indices[0]
-          matching_slice = match.value.slice(indexPair[0], indexPair[1]+1)
-          console.log(matching_slice)
-          console.log(display_match)
-          display_match = display_match.replace(
-            matching_slice,
-            '<span class="matchHighlight">' + matching_slice + '</span>'
-          )
-        }
-        header_matches.push(display_match)
+      display_match = match.value
+      if (match.indices.length >= 1) {
+        match.indices.sort((a, b) => (b[1]-b[0])-(a[1]-a[0]))
+        indexPair = match.indices[0]
+        matching_slice = match.value.slice(indexPair[0], indexPair[1]+1)
+        display_match = match.value.replace(
+          matching_slice,
+          '<span class="matchHighlight">' + matching_slice + '</span>'
+        )
       }
+      display_matches[match.key].push(display_match)
+
       return true
     })
 
-    header_matches_p.innerHTML += "header_matches: [" + header_matches.join(', ') + ']'
-
     content = document.createElement('a')
     content.innerHTML = r.item.title
     content.href = r.item.path
 
     wrapper.appendChild(content)
-    wrapper.appendChild(extra_info)
-    if (header_matches.length > 0) {
-      wrapper.appendChild(header_matches_p)
-    }
+
+    Object.keys(display_matches).forEach(key => {
+      if (display_matches[key].length < 1) return
+
+      p = document.createElement('p')
+      p.className = "smallText"
+      p.innerHTML += key + ": [" + display_matches[key].join(', ') + ']'
+      wrapper.appendChild(p)
+    })
 
     results.appendChild(wrapper)
   })
 }
 
 searchBar.addEventListener('keyup', callback)
+searchBar.addEventListener('change', callback)
+resultsMax.addEventListener('keyup', callback)
+resultsMax.addEventListener('change', callback)
 callback()

styles.css

@@ -73,13 +73,19 @@ blockquote * {
 	margin: 0;
 }
 
-#search {
+#searchWrapper > input {
 	padding: 1em;
-	margin: 1em 0 1em 0;
+	margin: 1em 0.5em 1em 0.5em;
 	font-size: 1em;
-	width: 100%;
+	min-width: 0;
 }
 
+#searchWrapper {
+	display: flex
+}
+
+#search { flex-grow: 9 }
+
 #results {
 	overflow-x: scroll;
 }

templates/home_index.html

@@ -12,11 +12,14 @@ These are my personal notes. Correctness is not guaranteed.
 Browse <a href="/notes">here</a> or by tag <a href="/.tags">here</a>.
 </p>
 
+<div id="searchWrapper">
 <input placeholder="Search" id="search">
+<input type="number" id="resultsMax" min="0" value="5">
+</div>
 <div id="results">
 </div>
 
-<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
+<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
 
 <script src="/fuse.js"> </script>
 <script> const data = $data$ </script>