🕵 Suggestify

Fully accessible search with suggestions (Suggestions served by serverless function)

Please note: this project is a personal project I made available and will probably keep changing things to my liking or personal usage. Also, the serverless function with the suggestion logic is not included; I'm working on it and want to keep it for myself for now :)

➡ Demo

🌎 Browser support

• Chrome
• Edge (Chrome)
• Firefox
• Safari

🐎 Getting started

Install

$ yarn add suggestify

Set up your HTML

<div id="suggestify" role="search">
	<input placeholder="Search..." aria-label="Search input" />
	<button aria-label="Delete input"></button>
	<button type="submit" aria-label="Search"></button>
</div>

Import the files in your Javascript or TypeScript file

// import Suggestify
import Suggestify from 'suggestify';

// Init and config
new Suggestify(...);

Configure

The selector can either be a string or HTMLElement

new Suggestify('#sugestify', {
	// Redirect url with search input
	url: '/search?q=', // default: ?q=

	// Suggestion engine url
	engine: 'https://example.com/search-api', // default: /api/search

	// Class to add to elements
	class: 'my-class', // default: suggestify

	// Remove suggestions if user clicks outside search
	blur: true, // default: true

	// Add <i> in button element for custom icon styling
	icon: true, // default: true

	// Give suggestions instantly on load
	instant: false, // default: false

	// Translations for banner text
	translations: {
		suggestions: 'Most used search results', // default: Suggestions
		results: 'Nothing to see', // default: No suggestions found
	},
});

🎉 Styling

scss is included and only works with suggestify class.

@import 'suggestify/style.scss';

The cleaner version is to copy the styling and adjust it to your liking.

👨‍💻 Development

See GitHub Page