jQuery-Tags-Input/test.html at master · delightedCrow/jQuery-Tags-Input · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jQuery Tags Input Test Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/south-street/jquery-ui.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script src="jquery.tagsinput.min.js"></script>

	<script type="text/javascript">
		function onAddTag(tag) {
			alert("Added a tag: " + tag);
		}
		function onRemoveTag(tag) {
			alert("Removed a tag: " + tag);
		}

		$(function() {
			$('#tags_1').tagsInput();
			$('#tags_2').tagsInput({
				onChange: function(elem, elem_tags)
				{
					var languages = ['php','ruby','javascript'];
					$('.tag', elem_tags).each(function()
					{
						if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
							$(this).css('background-color', 'yellow');
					});
				}
			});

			var available_tags = [
				"ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL",
				"ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
				"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"
			];

			// See jQuery Autocomplete for the complete list of Autocomplete options
			// ( http://jqueryui.com/demos/autocomplete/ )
			$('#tags_3').tagsInput({
			    autocomplete: {source: available_tags},
			});
// Uncomment this line to see the callback functions in action
//			$('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag});

// Uncomment this line to see an input with no interface for adding new tags.
//			$('input.tags').tagsInput({interactive:false});
		});

	</script>

</head>
<body>
	<section>
	    <h4>jQuery Tags Input!</h4>
		<form>
			<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" />

			<label>Technologies: (Programming languages in yellow)</label>
			<input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" />
		</form>
	</section>

	<section>
	    <h4>Jquery Tags Input with jQuery UI Autocomplete:</h4>
		<form>
			<input id="tags_3" type="text" class="tags" />
		</form>
	</section>

</body>