A lightweight jQuery plugin for suggesting answers in form inputs.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A lightweight jQuery plugin for suggesting answers in form inputs.

This plugin is not made for general autocorrect needs nor for huge lists of suggestions--if you want that, you should do most of the computing on a server. If you have a client-side-only website and no server, though, this is perfect for suggesting answers in your form!


Using LiteSuggest

To use LiteSuggest, you must be using jQuery.

LiteSuggest comes with a JS and a CSS file.


To use LiteSuggest, you need a few things in your HTML.

  • Any input element you want to have suggestions attached to must be inside of an element with the class litesuggest-group.
  • Make sure your input is of type text.
  • Give each input a name.
  • Note: You probably want to turn off the browser autocomplete in your inputs by adding autocomplete="off" in each tag.
  • If you want to have multiple inputs with the same suggestions inside of the same group, you must give those inputs different names.


    <div class="litesuggest-group">
            <input type="text" name="in1" autocomplete="off"/>
            <input type="text" name="in2" autocomplete="off"/>

  • If you want to have multiple LiteSuggest groups in the same container that use different suggestions, give them different selectors that you can specify when intiating the plugins.


    <div class="litesuggest-group group1">
            <input type="text" name="in" autocomplete="off"/>
    <div class="litesuggest-group group2">
            <input type="text" name="in" autocomplete="off"/>

litesuggest.js (or litesuggest.min.js)

The jQuery plugin.

To instantiate, call .litesuggest() on your container with your options:

        words: ["any", "words", "you want", "to be", "suggested"], // An array of strings, which will be parsed and used for suggestions
        groupSelector: ".group1" // An additional selector you can use if you want to use multiple litesuggest input groups


    $.fn.litesuggest.defaults = {
        groupSelector: "",
        words: []

litesuggest.css (or litesuggest.min.css)

The CSS file. Technically, the plugin will work without this file, but it will be extremely difficult/confusing to use.

The CSS styles the dropdown that is generated by your suggestions so that it actually looks and feels like a dropdown. It also handles the styling of the text inside the dropdown, so if you want to change that styling, just directly edit this file.