Input tag Creation

by saifrahu28

HTML

<script src="https://www.dropbox.com/s/wt6a9gz3y0aim26/jquery.autoGrowInput.js"></script>
<script src="https://www.dropbox.com/s/7lo31mrhycpv0ia/jquery.tagedit.js"></script>
<script src="https://www.dropbox.com/s/3qx687v6igmd7mk/jquery-ui-1.8.6.custom.min.js"></script>
<link rel="stylesheet" href="https://www.dropbox.com/s/g4bzvjx777y528u/jquery.tagedit.css">
<link rel="stylesheet" href="https://www.dropbox.com/s/j5dj3kd2ej82vis/jquery-ui-1.8.6.custom.css">

<body>
	<p id="local-source">
	    <input type="text" name="tag[]" value="" class="tag"/>
	</p>

</body>

JavaScript

$(function() {	
		// Empty List
		$( '#empty-list input.tag' ).tagedit({
			autocompleteURL: 'server/autocomplete.php'
		});
		
		// Edit only
		$( '#brackets input.tag').tagedit({
			autocompleteURL: 'server/autocomplete.php'
		});
		
		// Arrow List
		$( '#arrow input.tag' ).tagedit({
			autocompleteURL: 'server/autocomplete.php',
			autocompleteOptions: {minLength: 0}
		});
		
		// Custom Break Characters
		$('#custom-break input.tag').tagedit({
			autocompleteURL: 'server/autocomplete.php',
			// return, comma, space, period, semicolon
			breakKeyCodes: [ 13, 44, 32, 46, 59 ]
		});
		
		// Local Source
		var localJSON = [
			{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
			{ "id": "2", "label": "Common Quail",	"value": "Common Quail" },
			{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" }
		];				
		$('#local-source input.tag').tagedit({
			autocompleteOptions: {
				source: localJSON
			}
		});
		
		// Function Source
		$('#function-source input.tag').tagedit({
			autocompleteOptions: {
				source: function(request, response){
					var data = [
						{ "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
						{ "id": "2", "label": "Common Quail",	"value": "Common Quail" },
						{ "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" },
						{ "id": "4", "label": "Merlin", "value": "Merlin" },
					];				
					return response($.ui.autocomplete.filter(data, request.term) );
				}
			}
		});	
	});