Fixedsearch - a fast, client side search for Hugo with Fusejs

Heracles · January 3, 2021, 7:27pm

This is a client side drop-in for searching text on Hugo sites:

gist.github.com

https://gist.github.com/Arty2/8b0c43581013753438a3d35c15091a9f

fixedsearch.js

// static/scripts/fixedsearch/fixedsearch.js
/*--------------------------------------------------------------
fixedsearch — Super fast, client side search for Hugo.io with Fusejs.io
based on https://gist.github.com/cmod/5410eae147e4318164258742dd053993
--------------------------------------------------------------*/

fixedsearch = function(){
	var search_form = document.getElementById('search-form'); // search form
	var search_input = document.getElementById('search-input'); // input box for search
	var search_submit = document.getElementById('search-submit'); // form submit button

This file has been truncated. show original

index.json

{{/* layouts/_default/index.json */}}
{{- $.Scratch.Add "index" slice -}}
{{- range where .Site.RegularPages.ByDate.Reverse "Type" "not in"  (slice "page" "json") -}}
	{{ if .Params.dateCreated }}
			{{ $.Scratch.Set "date" (.Params.dateCreated) }}
	{{ else }}
			{{- if isset site.Params "date_format" -}}
				{{- $.Scratch.Set "date" (.Date.Format site.Params.date_format) -}}
			{{- else -}}
				{{- $.Scratch.Set "date" (.Date.Format "2006-01-02") -}}

This file has been truncated. show original

license.md

© 2020 [Heracles Papatheodorou](https://heracl.es) a.k.a [@Arty2](https://twitter.com/Arty2)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

There are more than three files. show original

See heracl.es for a live preview: hit Ctrl + / or click on the magnifying glass icon and start typing. With its default styling, fixedsearch appears as a magnifying glass ( ⌕ ) at the top right of your pages. When in focus, a fixed interface appears at the right.

Press Ctrl + / to invoke search or click on the magnifying glass icon.
Start typing and see results as you type.
Use Enter once, or Tab or arrow keys to select result.
Press Enter to navigate to the selected page.
You may exit the search interface with the Esc key, or taking focus away from it.
You may return from the results to the search box with the Backspace key.

It’s by no means a novel implementation (see fuse #tips-tricks), but an alternate take with focus on keyboard shortcuts and avoiding to load the search mechanism and index until needed. Builds upon the work of Craig Mod’s fastSearch, Eddie Webb’s search and Matthew Daly’s search explorations. I hope it becomes useful to Hugo makers, as the work it’s based on was to me.

Topic		Replies	Views
Fast, keyboard-optimized search for Hugo tips & tricks	9	2135	March 11, 2020
A lightweight, fuzzy, client-side search template for Hugo tips & tricks	11	1495	September 30, 2022
A fast drop-in ready-to-use search solution for Hugo themes tips & tricks	5	1218	August 1, 2020
Site search implemented using just Hugo + JS (No Gulp, Grunt, etc.) tips & tricks	1	1525	March 8, 2018
Adding in-browser search to a Hugo site using Lunr.js and Preact tips & tricks	2	814	February 9, 2022

Fixedsearch - a fast, client side search for Hugo with Fusejs

Related Topics