This repository has been archived by the owner on Jul 13, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 26
/
index.html
executable file
·257 lines (228 loc) · 8.56 KB
/
index.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inputosaurus Text</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/cupertino/jquery-ui.css" rel="stylesheet">
<link href="./inputosaurus.css" rel="stylesheet">
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
h2, h3{
margin : 40px 0 5px;
}
h3{
border-bottom : 1px solid #ddd;
color : #655;
line-height : 30px;
}
.muted.text-right{
padding-right : 16%;
text-align : right;
}
section{
margin-left : 20px;
}
.markup a{
text-decoration : none;
}
.markup div{
display : none;
}
section.examples p{
color : #777;
}
section.examples ul{
margin : 5px 0;
}
section.examples article:first-child h3{
margin-top : 10px;
}
#options li{
color : #944;
}
#options li span{
font-family : Monaco, Courier;
color : #666;
font-size : 80%;
}
#options li p{
color : #222;
}
input.original{
width : 350px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<a style="position: absolute; top: 0; right: 0; border: 0; display: block; z-index: 10000;" href="https://github.com/sproutsocial/inputosaurus-text">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</a>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Inputosaurus Text</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#description">Description</a></li>
<li class="active"><a href="#examples">Examples</a></li>
<li class="active"><a href="#options">Options</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<a href="https://github.com/sproutsocial/inputosaurus-text" title="source codez" id="description">
<img src="https://d672eyudr6aq1.cloudfront.net/img/input-o-saurus1.jpg" alt="Inputosaurus Text" />
</a>
<p class="muted text-right">illustration by <a href="https://twitter.com/theskywatcher">@theskywatcher</a></p>
<p>Inputosaurus Text is an <input> that allows for multiple delimited values, parse hooks, autocomplete, keyboard shortcuts, etc.</p>
<h2 id="examples">Examples</h2>
<section class="examples">
<article>
<h3>Default</h3>
<p>
- The instantiated input's value is set to a list of values delimited with a comma (<code>outputDelimiter</code>). <br />
- As values are input, if a comma or semi-colon (<code>inputDelimiter</code>) is detected, the value is automatically parsed.
</p>
<input type="text" value="[email protected]" id="widget1" />
<div class="markup">
<a href="javascript:void(0);">toggle hidden input/markup</a>
<div>
<input type="text" id="widget1_reflect" class="original" disabled="disabled" />
<pre class="prettyprint linenums">$('#widget1').inputosaurus({
width : '350px'
});</pre>
</div>
</div>
</article>
<article>
<h3>Autocomplete</h3>
<input type="text" value="" id="widget2" />
<div class="markup">
<a href="javascript:void(0);">toggle hidden input/markup</a>
<div>
<input type="text" id="widget2_reflect" class="original" disabled="disabled" />
<pre class="prettyprint linenums">$('#widget2').inputosaurus({
width : '350px',
autoCompleteSource : ['alabama', 'illinois', 'kansas', 'kentucky', 'new york'],
activateFinalResult : true
});</pre>
</div>
</div>
</article>
<article>
<h3>Parse Hook</h3>
<p>
- A good use case for the parse hook is input validation.<br />
- For this example, enter two strings separated with a space to trigger the parse hook (which will surround the strings with double quotes).
</p>
<input type="text" value="" id="widget3" />
<div class="markup">
<a href="javascript:void(0);">toggle hidden input/markup</a>
<div>
<input type="text" id="widget3_reflect" class="original" disabled="disabled" />
<pre class="prettyprint linenums">$('#widget3').inputosaurus({
width : '350px',
outputDelimiter : ' OR ',
parseHook : function(valArr){
return $.map(valArr, function(val){
return /\s/.test(val) ? '"' + val + '"' : val;
});
}
});</pre>
</div>
</div>
</article>
</section>
<h2>Options</h2>
<section id="options">
<ul>
<li>allowDuplicates <span>(type : Boolean :: default : false)</span></li>
<li>autoCompleteSource <span>(type : Array/String/Function :: default : '')</span>
<p class="alert alert-info">when specified, autocomplete will be instantiated and this value will be passed as the jQuery Autocomplete source</p>
</li>
<li>activateFinalResult <span>(type : Boolean :: default : false)</span>
<p class="alert alert-info">
when forcing users to select from an autocomplete list, allow them to press 'Enter' to select an item if it's the only option left
</p>
</li>
<li>caseSensitiveDuplicates <span>(type : Boolean :: default : false)</span>
<p class="alert alert-info">consider duplicated elements only if they are exactly equal (checking the case)</p>
</li>
<li>inputDelimiters <span>(type : Array :: default : [',', ';'])</span>
<p class="alert alert-info">auto parsing trigger</p>
</li>
<li>outputDelimiter <span>(type : String :: default : ',')</span>
<p class="alert alert-info">this separator is used to rejoin all input items back to the value of the original <input></p>
</li>
<li>parseHook <span>(type : Function :: default : null)</span>
<p class="alert alert-info">manipulate and return the input value after parseInput() parsing<br />
the array of tag names is passed and expected to be returned as an array after manipulation</p>
</li>
<li>parseOnBlur <span>(type : Boolean :: default : false)</span></li>
<li>width <span>(type : String/Integer :: default : null)</span></li>
<li>wrapperElement <span>(type : String :: default : null)</span>
<p class="alert alert-info">optional wrapper for widget</p>
</li>
</ul>
</section>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="./inputosaurus.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script>
$('#widget1').inputosaurus({
width : '350px',
change : function(ev){
$('#widget1_reflect').val(ev.target.value);
}
});
$('#widget2').inputosaurus({
width : '350px',
autoCompleteSource : ['alabama', 'illinois', 'kansas', 'kentucky', 'new york'],
activateFinalResult : true,
change : function(ev){
$('#widget2_reflect').val(ev.target.value);
}
});
$('#widget3').inputosaurus({
width : '350px',
outputDelimiter : ' OR ',
parseHook : function(valArr){
return $.map(valArr, function(val){
val = $.trim(val);
return /\s/.test(val) ? '"' + val + '"' : val;
});
},
change : function(ev){
$('#widget3_reflect').val(ev.target.value);
}
});
$('.markup').on('click', 'a', function(ev){ $(ev.currentTarget).next('div').toggle(); });
prettyPrint();
</script>
</body>
</html>