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')