Ghosty Search

Display search examples that mimic a user typing 👻🔍

Ghosty Search is like a slideshow for your search box but instead of images you'll see rotating suggestions. Each of the suggestions look like they're being typed by another human (the "ghost"). You'll see randomised time on each simulated keystroke, higher speed deletions and even a typo here and there.

See the Codepen demo for an example using CSS and HTML.

Usage

yarn add ghostysearch
# or
npm install ghostysearch

Simple Example

import GhostySearch from 'ghostysearch';

new GhostySearch({
    inputElement: document.querySelector('.js-ghosty'), // The search input element
    suggestions: [], // An array of suggestions to cycle through
    wrapElement: document.querySelector('.js-ghosty-wrap'), // Wrapping element where event classes will be added
    wrapClasses: {
      finished: 'is-finished',
      thinking: 'is-thinking',
      typing: 'is-typing',
      finished: 'is-finished',
      deleting: 'is-deleting',
      focussed: 'is-focussed',
      destroyed: 'is-destroyed',
    }, // Specify the container classes added at each event. Specify only what you need.
    baseSpeed: 65, // The initial speed of typing, higher == slower
    randomness: 4, // Higher the number, the more random time with each keypress
    pauseBefore: 1000, // Pause length before typing a suggestion
    pauseAfter: 1500, // Pause length after typing the suggestion
    oopsyFrequency: 0, // [0-9], higher == more, The frequency of incorrect key presses
});

Features

• It's highly configurable, customise it all
• Events are fired to cover every action
• It's lightweight; 8kb minified
• There's zero dependencies
• You'll be 100% cooler for using it 😎

Browser Support

Tested and ready for production in all modern browsers. You can gain IE11+ support with a Object.assign polyfill (at the bottom of the page) and a CustomEvent polyfill.

Contribution

Contribution is welcome or open an issue and I'll tackle it.

License

MIT