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.
Permalink
Failed to load latest commit information.
css
js
LICENSE
README.md
index.html

README.md

LiteSuggest

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!

Demo

Using LiteSuggest

To use LiteSuggest, you must be using jQuery.

LiteSuggest comes with a JS and a CSS file.

HTML

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.

Example:

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

  • 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.

Example:

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

litesuggest.js (or litesuggest.min.js)

The jQuery plugin.

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

    $(".container").litesuggest({
        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
    });

Defaults:

    $.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.