Skip to content
A lightweight jQuery plugin for suggesting answers in form inputs.
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit 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.

You can’t perform that action at this time.