alvierahman90/notes2web
Archived
1
1
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

Add a max no. results input

Browse Source
This commit is contained in:
Akbar Rahman 2021-08-21 10:33:31 +01:00
parent 1386679c49
commit 7bda685927
3 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
search.js
View File

@ -9,11 +9,12 @@ const fuse = new Fuse(data, {
}) })
const searchBar = document.getElementById('search') const searchBar = document.getElementById('search')
const resultsMax = document.getElementById('resultsMax')
const results = document.getElementById('results') const results = document.getElementById('results')
function callback() { function callback() {
results.innerHTML = '' results.innerHTML = ''
fuse.search(searchBar.value).slice(0,15).forEach(r => { fuse.search(searchBar.value).slice(0, parseInt(resultsMax.value)).forEach(r => {
wrapper = document.createElement('div') wrapper = document.createElement('div')
wrapper.className = "article" wrapper.className = "article"
@ -64,4 +65,5 @@ function callback() {
} }
searchBar.addEventListener('keyup', callback) searchBar.addEventListener('keyup', callback)
resultsMax.addEventListener('keyup', callback)
callback() callback()

12
styles.css
View File

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

5
templates/home_index.html
View File

@ -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>. Browse <a href="/notes">here</a> or by tag <a href="/.tags">here</a>.
</p> </p>
<div id="searchWrapper">
<input placeholder="Search" id="search"> <input placeholder="Search" id="search">
<input type="number" id="resultsMax" min="0" value="5">
</div>
<div id="results"> <div id="results">
</div> </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 src="/fuse.js"> </script>
<script> const data = $data$ </script> <script> const data = $data$ </script>