jQuery TagHead v0.5.2

A magical mix between an input tag system, and a typahead engine.

Here is a quick demo ! Check the code

Usage

Basic

<input type="text" id="myInput">
<script>
  $(function() {
    $("#myInput").taghead();
  });
</script>

Default value

<input type="text" id="myInput" value="1,2,3" data-tags="Label 1,Label 2,Label 3">
<script>
  $(function() {
    $("#myInput").taghead();
  });
</script>

Remote source

<input type="text" id="myInput">
<script>
  $(function() {
    $("#myInput").taghead({ 
                remote: {
                    enable: true,
                    source: "data.json",
                    displayData: 'name',
                    storeData: 'id'
                    }
            });
  });
</script>

Custom CSS

<input type="text" id="myInput">
<script>
  $(function() {
    $("#myInput").taghead({ 
                style: {
                    wrapperClass: 'custom-wrapper',
                    tagClass: 'custom-tag',
                    tagListWrapperClass: 'custom-tag-list-wrapper',
                    tagListClass: 'custom-tag-list-wrapper',
                    tagListItemClass: 'custom-tag-list-item',
                    inputClass: 'custom-input'
                    }
            });
  });
</script>

Configuration

remote
- enable: boolean (default: false)
- source: string (default: '')
- method: 'GET' or 'POST' (default: 'GET')
- sentParam: string (default: 'value')
- displayData: string (default: 'value')
- storeData: string (default: 'value')
- minLength: number (default: 2)
- forceValid: boolean (default: false)
allowDuplicates: boolean (default: false)
limit: integer (default: -1)
style
- wrapperClass: string (default: '')
- tagClass: string (default: '')
- tagListWrapperClass: string (default: '')
- tagListClass: string (default: '')
- tagListItemClass: string (default: '')
- inputClass: string (default: '')
text
- phAddTag: string (default: 'Add a tag')