forked from webworka/Tagedit
/
playground.html
139 lines (121 loc) · 4.94 KB
/
playground.html
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>jQuery Plugin tagedit - Playground</title>
<meta name="generator" content="Komodo IDE" />
<meta name="author" content="Oliver Albrecht" />
<meta name="description" content="Example Page for the jQuery Plugin tagedit. List of usecases and tests" />
<meta name="robots" content="index, follow" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de"/>
<meta name="language" content="de"/>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="StyleSheet" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" type="text/css" media="all"/>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>
<script type="text/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) );
}
}
});
});
</script>
</head>
<body>
<h1>jQuery Plugin Tagedit - Playground</h1>
<p>
Some more example of different use cases.
</p>
<h2>Starting with an empty list</h2>
<form action="server/formtarget.php" method="post" id="empty-list">
<p>
<input type="text" name="tag[]" value="" class="tag"/>
<input type="submit" name="save" value="Save"/>
</p>
</form>
<h2>Use square brackets in tht inputname</h2>
<form action="server/formtarget.php" method="post" id="brackets">
<p>
<input type="text" name="formdata[tags][3-a]" value="Hazel Grouse" class="tag" />
<input type="text" name="formdata[tags][7-a]" value="Greylag Goose" class="tag" />
<input type="submit" name="save" value="Save"/>
</p>
</form>
<h2>Use Arrow-Down for showing the complete Autocompleterlist</h2>
<form action="server/formtarget.php" method="post" id="arrow">
<p>
<input type="text" name="tag[]" value="" class="tag"/>
<input type="submit" name="save" value="Save"/>
</p>
</form>
<h2>Use custom break characters</h2>
<form action="server/formtarget.php" method="post" id="custom-break">
<p>
<input type="text" name="tag[]" value="" class="tag"/>
<input type="submit" name="save" value="Save"/>
</p>
</form>
<h2>Use local source for autocomplete list</h2>
<form action="server/formtarget.php" method="post" id="local-source">
<p>
<input type="text" name="tag[]" value="" class="tag"/>
<input type="submit" name="save" value="Save"/>
</p>
</form>
<h2>Use function source for autocomplete list</h2>
<form action="server/formtarget.php" method="post" id="function-source">
<p>
<input type="text" name="tag[]" value="" class="tag"/>
<input type="submit" name="save" value="Save"/>
</p>
</form>
<p class="footer">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.<br/>
© 2010 Oliver Albrecht - <a href="http://webwork-albrecht.de">webwork-albrecht.de</a>
</p>
</body>
</html>