Autocomplete Choice Input

Link the Required Files

jQuery library has to be included first. Then plugins javascript and css files has to be included both.

<!-- Include jQuery: -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/autocomplete-choice-input.js"></script>
<link rel="stylesheet" href="css/autocomplete-choice-input.css" type="text/css"/>

Plugin will work both with version 2.x of the jQuery library as well as with version 1.10.x of the jQuery library.

Create input with choice data

Now simply use HTML and create input type type="text" and fill data attribute options data-options="{}" with values that will be selectable.
```
<input type="text" name="example1" id="example1"
       data-options="{val-1:"Label 1", val-2:"Label 2"}" >
```
Call the plugin

In the end, simply call the plugin on your input.You may also specify further options, see the Options tab for more information.
```
<script type="text/javascript">
    $(document).ready(function(){
       $('#example1').autocompleteChoiceInput();
    });
</script>
```

Use Firebug, Chrome Developer Tools to get the best out of the below examples.

Don't forget to escape data-options value if you are passing items directly as javascript object string.

minLenght

minLenght sets number of characters, which has to be typed to start suggesting words.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-minLength').autocompleteChoiceInput({
            minLength: 3
         });
    });
</script>

<input type="text" class="form-control" name="example-minLength" id="example-minLenght"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

maxItems

maxItems sets max count of suggested items

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-maxItems').autocompleteChoiceInput({
            maxItems: 2
         });
    });
</script>

<input type="text" class="form-control" name="example-maxItems" id="example-maxItems"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

singleText

singleText sets output mode. If this parameter is true, selected items are set as string of default input. Else if singleText is false, new hidden input is created for each selected item.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-singleText').autocompleteChoiceInput({
            singleText: true
         });
    });
</script>

<input type="text" class="form-control" name="example-singleText" id="example-singleText"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

singleTextDelimiter

sets character or string which delimits each values if singleText is true

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-singleTextDelimiter').autocompleteChoiceInput({
            singleText: true,
            singleTextDelimiter: '#delimiter#'
         });
    });
</script>

<input type="text" class="form-control" name="example-singleTextDelimiter" id="example-singleTextDelimiter"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

data

data allows you to pass suggestion data differently than via data-options attribute

<script type="text/javascript">
    $(document).ready(function(){
         var options = {"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"};

         $('#example-data').autocompleteChoiceInput({
            data: options
         });
    });
</script>

<input type="text" class="form-control" name="example-data" id="example-data">

allowAdd

allowAdd options enables creating new items. You can add item by clicking on Add... item in suggested list or by pressing Enter if keyboard support is enabled.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-allowAdd').autocompleteChoiceInput({
            allowAdd: true
         });
    });
</script>

<input type="text" class="form-control" name="example-allowAdd" id="example-allowAdd"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

addedPrefix

addedPrefix puts given string in front of value of each item created by user

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-addedPrefix').autocompleteChoiceInput({
            allowAdd: true,
            addedPrefix: "#addedValue#"
         });
    });
</script>

<input type="text" class="form-control" name="example-addedPrefix" id="example-addedPrefix"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

allowEdit

allowEdit enables to edit selected values. It depends on allowAdd option which has to be true.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-allowEdit').autocompleteChoiceInput({
            allowAdd: true,
            allowEdit: true
         });
    });
</script>

<input type="text" class="form-control" name="example-allowAdd" id="example-allowAdd"
    data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

Using HTML Select

You can use select box instead of text input but it is not main purpose of this plugin. Primary Autocomplete Choice Input was designed to bring select box functionality to text input, because I needed user to choose one or more from 10 000 options but rendering select box with this amount of options is slow. By default select options are parsed as values for suggestion but you can override them with data-options attribute or data option as well as in text input examples above.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-select').autocompleteChoiceInput();
    });
</script>

<select class="form-control" name="example-select" id="example-select">
    <option value="val-1">Alabama</option>
    <option value="val-2">Alaska</option>
    <option value="val-3">California</option>
    <option value="val-4">New York</option>
    <option value="val-5">Texas</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-select2').autocompleteChoiceInput();
    });
</script>

<select class="form-control" name="example-select2" id="example-select2"
         data-options="{"val-1":"Arkansas","val-2":"Colorado","val-3":"Hawaii","val-4":"Nevada","val-5":"Utah"}" >
    <option value="val-1">Alabama</option>
    <option value="val-2">Alaska</option>
    <option value="val-3">California</option>
    <option value="val-4">New York</option>
    <option value="val-5">Texas</option>
</select>

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-select3').autocompleteChoiceInput({
             data: {"val-1":"Arkansas","val-2":"Colorado","val-3":"Hawaii","val-4":"Nevada","val-5":"Utah"}
         });
    });
</script>

<select class="form-control" name="example-select3" id="example-select3">
    <option value="val-1">Alabama</option>
    <option value="val-2">Alaska</option>
    <option value="val-3">California</option>
    <option value="val-4">New York</option>
    <option value="val-5">Texas</option>
</select>

Setting default value

You can set default selected items by setting their values separated with ; as default input value. You can change default separator by setting singleTextSeparator. Default values has to be members of array of items for suggestion.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-defaultSelect').autocompleteChoiceInput();
    });
</script>

<input type="text" class="form-control" name="example-defaultValue" id="example-defaultValue" value="val-1;val-2" data-options="{"val-1":"Alabama","val-2":"Alaska","val-3":"California","val-4":"New York","val-5":"Texas"}">

If you are using select box, you can set default values by setting options attribute selected="selected".

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-defaultSelect').autocompleteChoiceInput();
    });
</script>

<select class="form-control" name="example-defaultSelect" id="example-defaultSelect">
    <option value="val-1">Alabama</option>
    <option value="val-2" selected="selected">Alaska</option>
    <option value="val-3">California</option>
    <option value="val-4">New York</option>
    <option value="val-5">Texas</option>
</select>

Using flat array with data

If you don't need to use different labels and values you can pass data for suggestion in flat array.

<script type="text/javascript">
    $(document).ready(function(){
         $('#example-defaultSelect').autocompleteChoiceInput({
             data: ["Alabama","Alaska","California","New York","Texas"]
         });
    });
</script>

<input type="text" class="form-control" name="example-array" id="example-array">

Arrow Up/Arrow Down

Move in suggested items list up/down.

Enter

Add selected suggested item to list of selected items.

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Autocomplete Choice Widget

Getting Started

Link the Required Files

Create input with choice data

Call the plugin

Options

Further examples

Using HTML Select

Setting default value

Using flat array with data

Keyboard support

License