Smarter Input, Faster Typing

📥 Download the latest release

A lightweight, flexible JavaScript plugin for input suggestions/autocomplete.
Supports multi-word suggestions, customizable array inputs, keyboard navigation, and optional callbacks.

• Demo
• Features
• Usage Example
• Plugin Parameters
• Styling
• Keyboard Navigation
• License

You can try Suggestify live on GitHub Pages:
👉 Live Demo

• Show suggestions while typing in an input field
• Supports multiple-word entries and optional whitespace in suggestions
• Optional prevention of duplicate entries
• Configurable array input with custom delimiter
• Keyboard navigation: Arrow Up/Down, Enter
• Post-select and submit callback functions
• Easy to integrate and lightweight

Include the plugin JS file in your project:

<script src="suggestify.js"></script>

Initialize Suggestify:

<input type="text" id="suggestify">

<script>
  const suggestify = new Suggestify({
    selector: "suggestify",
    suggestOptions: ["apple", "banana", "orange"],
    arrayInput: true,
    arrayDelimiter: ", ",
    allowWhitespace: true,
    allowDuplicates: false,
    caseSensitive: false,
    postSelectFunction: (tag) => console.log("Selected:", tag),
    submitFunction: () => console.log("Enter pressed"),
    fallbackOption: "fruit"
  });
</script>

💡 See the 🎨 Styling section to learn how to customize the look of the suggestion list.

Suggestify comes with minimal default styles to make the suggestion list look clean and usable out of the box.
These styles are deliberately simple and neutral, so you can easily override them in your own CSS if you need a custom look.

.suggestion-wrapper {
    position: relative;

    .suggestion-list {
        position: absolute;
        list-style: none;
        padding: 0;
        margin: 0;
        visibility: hidden;
        z-index: 99;
        top: 110%;
        opacity: 0;
        background: #2e2e2e;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        border-radius: 0 0 5px 5px;
        transition: all .2s;

        &.visible {
            visibility: visible;
            top: 100%;
            opacity: 1;
        }

        .suggestion-item {
            cursor: pointer;
            padding: 5px 10px;
            transition: all .1s;

            &:hover, &.selected {
                background-color: coral;
                color: white;
            }

            &:last-child {
                border-radius: 0 0 5px 5px;
            }
        }
    }
}

• .suggestion-wrapper → container of the whole element (including input field)
• .suggestion-list → container of the dropdown list
• .suggestion-item → one item of the list
• .selected → item currently highlighted with keyboard navigation

Arrow Up / Down: Move selection in the suggestion list

Enter: Select highlighted suggestion or execute submitFunction if none selected

This project is licensed under the MIT License - see the LICENSE file for details.

⬆ Back to Top