suggestify

Fully accessible search with suggestions

Usage no npm install needed!

<script type="module">
  import suggestify from 'https://cdn.skypack.dev/suggestify';
</script>

README

🕵 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