A jQuery token/Autocomplete input field solution with 2 Demos

The Tokenized autocomplete solution

The “tokens” is a jQuery plug-in for turning an ordinary input field into a tokenized and autocomplete input box.

You may specify a source of data in an array that will list down as a user types in that field. As the user selects a value, it will become a token or tag in that field. A user may add as many tokens as he/she wants.

A cross tiny icon will also display with each selected value to remove it from the input box.

Developer’s page

Set the tokens and autocomplete plug-in?

First of all, get the package from the above link or save the copy of tokens.js and tokens.css from the demo page. For that, “view source” the demo page, find both files and save them on your system.

Place it in the desired location and refer both files on the web page. The CSS file in the <head> section:

<link rel=”stylesheet” type=”text/css” href=”css/jquery-tokens/tokens.css”>

The JS file before the body closing tag:

<script src=”js/jquery-tokens/tokens.js”></script>

Initiate the plug-in with an array of values to be used for autocomplete. See the usage in the demo below.

A demo of tokenized auto-complete field

For the demo, I have used an input type created with Bootstrap. You may use it in simple input or styled with your own CSS. Its ID is used in the jQuery code for initializing the plug-in with options. First, have a look:

jQuery token autocomplete

See online demo and code

The markup for this demo:

    <div class="container">

        <h1>A demo of tokenized autocomplete</h1>

    </div>

    <form class="form">

    <div class="container">

        <div class="row">

            <div class='col-sm-4 form-group'>

                <label for="name">Type the text</label>

                <input id="demo-tokens" class="form-control" type="text" required>

            </div>

     </div>

    </form>

The script:

<script>

      (function(){

        $('#demo-tokens').tokens({

          source : [

            'United States', 'United Kingdom', 'Canada', 'Mexico',

            'Germany', 'France', 'Russia', 'Spain',

            'Turkey', 'India', 'Pakistan', 'Bangladesh',

            'Sri Lanka', 'Nepal', 'Brazil', 'Oman',

            'Saudi Arabia'

          ],

          initValue : [ 'United States' ]

        });

      })();

</script>

You can see, an array of values that are used for the auto-complete are provided in the source option of the plug-in.

The initValue option allows adding one or more initial values that are displayed as tokens. Separate the values by a comma.

As you type in, the plug-in will find and list the matched letter values.

A demo with minimum characters

In the above demo, you saw the list of matched countries appear as you enter the first letter. You may require displaying the auto-complete list after a certain number of characters are entered. For example, entering ‘Uni’ will display the countries with “United…”.

This can be done by using the minChars option. For this demo, I used the value 2. The list will display as you enter the third character:

jQuery token autocomplete min-chars

Use this jQuery code:

      (function(){

        $('#demo-tokens').tokens({

          source : [

            'United States', 'United Kingdom', 'Canada', 'Mexico',

            'Germany', 'France', 'Russia', 'Spain',

            'Turkey', 'India', 'Pakistan', 'Bangladesh',

            'Sri Lanka', 'Nepal', 'Brazil', 'Oman', 'United Arab Emirates',

            'Saudi Arabia'

          ],

          minChars:'2',

          initValue : [ 'United States' ]

        });

      })();

The plug-in has many options to change the look and feel of the field, list, and change the default texts. Learn more about this nice and useful plug-in on the developer’s page.