From e55c070f24ebbe0436a62c4fc3ee4e7ed8de107a Mon Sep 17 00:00:00 2001 From: Song Zheng Date: Fri, 21 Feb 2020 23:16:43 -0800 Subject: [PATCH] fix search bug and add css --- src/search.js | 75 +++++++++++++++++++++++++------------------------ views/notes.ejs | 1 + 2 files changed, 40 insertions(+), 36 deletions(-) diff --git a/src/search.js b/src/search.js index 1d710de..062005c 100644 --- a/src/search.js +++ b/src/search.js @@ -1,41 +1,39 @@ -const initSearch = (noteMap) => { - const searchBox = document.querySelector('#searchBox') - const allNotes = document.querySelectorAll('.card-columns .card-title') +const resultContainer = document.querySelector('#resultListContainer') +const searchBox = document.querySelector('#searchBox') +const allNotes = document.querySelectorAll('.card-columns .card-title') +let resultElements = [] +let noteMap = {} - let resultElements = [] - const resultContainer = document.querySelector('#resultListContainer') - searchBox.focus() - const search = () => { - const searchQuery = searchBox.value - if (searchQuery.length < 2) return - fetch(`/search/${searchQuery}`).then( r=> r.text() ).then(data => { - // invalidate old requests - if( searchBox.value !== searchQuery) return - const dataArr = data.split('\n').filter( d => d ).map( d => { - const result = d.substr(5) // get rid of data/ prefix - const resultArr = result.split(':') - const title = resultArr.shift() - const match = resultArr.join(':') - return { - title, match - } - }) - resultContainer.innerHTML = '' - const newTitleMap = {...noteMap} - resultElements = dataArr.map( (obj, idx) => { - delete newTitleMap[obj.title.toLowerCase()] - return new Result(obj.title, obj.match, idx) - }) - Object.keys(newTitleMap).forEach( title => { - if (!title.includes(searchQuery.toLowerCase())) { - return - } - resultElements.push( - new Result(newTitleMap[title], '', resultElements.length) - ) - }) +const search = () => { + const searchQuery = searchBox.value + if (searchQuery.length < 2) return + fetch(`/search/${searchQuery}`).then( r=> r.text() ).then(data => { + // invalidate old requests + if( searchBox.value !== searchQuery) return + const dataArr = data.split('\n').filter( d => d ).map( d => { + const result = d.substr(5) // get rid of data/ prefix + const resultArr = result.split(':') + const title = resultArr.shift() + const match = resultArr.join(':') + return { + title, match + } }) - } + resultContainer.innerHTML = '' + const newTitleMap = {...noteMap} + resultElements = dataArr.map( (obj, idx) => { + delete newTitleMap[obj.title.toLowerCase()] + return new Result(obj.title, obj.match, idx) + }) + Object.keys(newTitleMap).forEach( title => { + if (!title.includes(searchQuery.toLowerCase())) { + return + } + resultElements.push( + new Result(newTitleMap[title], '', resultElements.length) + ) + }) + }) } function Result(name, value, idx) { @@ -70,4 +68,9 @@ searchBox.addEventListener('keyup', (e) => { search() }) +const initSearch = (titleMap) => { + searchBox.focus() + noteMap = titleMap +} + module.exports = initSearch diff --git a/views/notes.ejs b/views/notes.ejs index c91de7f..1755a87 100644 --- a/views/notes.ejs +++ b/views/notes.ejs @@ -1,4 +1,5 @@ <%- include('./layout/header.ejs') %> +