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.