From c7ec14c266e443ea7c455ca9a3dd10ba743c4752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar=20N=C3=A1jera?= Date: Sun, 15 Jul 2018 22:43:02 +0200 Subject: review of search --- static/js/search.js | 163 +++++++++++++++++++++++++--------------------------- 1 file changed, 78 insertions(+), 85 deletions(-) (limited to 'static') diff --git a/static/js/search.js b/static/js/search.js index add8549..46627bc 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -1,108 +1,101 @@ summaryInclude=60; -var fuseOptions = { - shouldSort: true, - includeMatches: true, - threshold: 0.0, - tokenize:true, - location: 0, - distance: 100, - maxPatternLength: 32, - minMatchCharLength: 1, - keys: [ - {name:"title",weight:0.8}, - {name:"contents",weight:0.5}, - {name:"tags",weight:0.3}, - {name:"categories",weight:0.3} - ] +const fuseOptions = { + shouldSort: true, + includeMatches: true, + threshold: 0.0, + tokenize:true, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 2, + keys: [ + {name:"title",weight:0.8}, + {name:"contents",weight:0.5}, + {name:"tags",weight:0.3}, + {name:"categories",weight:0.3} + ] }; +const getQueryByParam = param => decodeURIComponent( + (location.search.split(param + '=')[1] || '').split('&')[0] +).replace(/\+/g, ' ') +var searchQuery = getQueryByParam("s"); -var searchQuery = param("s"); if(searchQuery){ - $("#search-query").val(searchQuery); - executeSearch(searchQuery); + $("#search-query").val(searchQuery); + executeSearch(searchQuery); }else { - $('#search-results').append("

Please enter a word or phrase above

"); + $('#search-results').append("

Please enter a word or phrase above

"); } function executeSearch(searchQuery){ - $.getJSON( "/index.json", function( data ) { - var pages = data; - var fuse = new Fuse(pages, fuseOptions); - var result = fuse.search(searchQuery); - console.log({"matches":result}); - if(result.length > 0){ - populateResults(result); - }else{ - $('#search-results').append("

No matches found

"); - } - }); + + fetch("/index.json") + .then(response => response.json()) + .then(data => { + let fuse = new Fuse(data, fuseOptions); + let result = fuse.search(searchQuery); + console.log({"matches":result}); + if(result.length > 0){ + populateResults(result); + }else{ + $('#search-results').append("

No matches found

"); + } + }); } function populateResults(result){ - $.each(result,function(key,value){ - var contents= value.item.contents; - var snippet = ""; - var snippetHighlights=[]; - var tags =[]; - if( fuseOptions.tokenize ){ - snippetHighlights.push(searchQuery); - }else{ - $.each(value.matches,function(matchKey,mvalue){ - if(mvalue.key == "tags" || mvalue.key == "categories" ){ - snippetHighlights.push(mvalue.value); - }else if(mvalue.key == "contents"){ - start = mvalue.indices[0][0]-summaryInclude>0?mvalue.indices[0][0]-summaryInclude:0; - end = mvalue.indices[0][1]+summaryInclude console.log( d) ) - if(snippet.length<1){ - snippet += contents.substring(0,summaryInclude*2); - } - //pull template from hugo templarte definition - var templateDefinition = $('#search-result-template').html(); - //replace values - var output = render(templateDefinition,{key:key,title:value.item.title,link:value.item.permalink,tags:value.item.tags,categories:value.item.categories,snippet:snippet}); - $('#search-results').append(output); + $.each(result,function(key,value){ + var contents= value.item.contents; + var snippet = ""; - $.each(snippetHighlights,function(snipkey,snipvalue){ - $("#summary-"+key).mark(snipvalue); - }); + if(snippet.length<1){ + snippet += contents.substring(0,summaryInclude*2); + } + //pull template from hugo templarte definition + var templateDefinition = $('#search-result-template').html(); + //replace values + var output = render(templateDefinition,{key:key, + title:value.item.title, + link:value.item.permalink, + tags:value.item.tags, + categories:value.item.categories, + snippet:snippet}); + $('#search-results').append(output); - }); -} + let snippetHighlights=[]; + snippetHighlights.push(searchQuery); + snippetHighlights.forEach(value => $("#summary-"+key).mark(value)); -function param(name) { - return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' '); + }); } function render(templateString, data) { - var conditionalMatches,conditionalPattern,copy; - conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g; - //since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop - copy = templateString; - while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) { - if(data[conditionalMatches[1]]){ - //valid key, remove conditionals, leave contents. - copy = copy.replace(conditionalMatches[0],conditionalMatches[2]); - }else{ - //not valid, remove entire section - copy = copy.replace(conditionalMatches[0],''); + var conditionalMatches,conditionalPattern,copy; + conditionalPattern = /\$\{\s*isset ([a-zA-Z]+) \s*\}(.+)\$\{\s*end\s*}/g; + // Since loop below depends on re.lastInxdex, we use a copy to capture any + // manipulations whilst inside the loop. + copy = templateString; + while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) { + if(data[conditionalMatches[1]]){ + // Valid key: Remove conditionals, leave contents. + copy = copy.replace(conditionalMatches[0],conditionalMatches[2]); + }else{ + // Not valid: Remove entire section. + copy = copy.replace(conditionalMatches[0],''); + } + } + templateString = copy; + // Now any conditionals removed we can do simple substitution. + var key, find, re; + for (key in data) { + find = '\\$\\{\\s*' + key + '\\s*\\}'; + re = new RegExp(find, 'g'); + templateString = templateString.replace(re, data[key]); } - } - templateString = copy; - //now any conditionals removed we can do simple substitution - var key, find, re; - for (key in data) { - find = '\\$\\{\\s*' + key + '\\s*\\}'; - re = new RegExp(find, 'g'); - templateString = templateString.replace(re, data[key]); - } - return templateString; + return templateString; } -- cgit v1.2.3