Skip to content
This repository was archived by the owner on Aug 3, 2018. It is now read-only.

Few Added Options #15

Open
lodev09 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Few Added Options #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0024cbd
Few key options
lodev09 Apr 8, 2014
914fb0d
Added Separator option
lodev09 Apr 8, 2014
12db9f4
updated doc with the new option
lodev09 Apr 8, 2014
d6f1205
Added Add event
lodev09 Apr 8, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/60b9f73e-fefd-40ea-aabd-8088357eedd8.dmp
View file
Open in desktop
Binary file not shown.
60 changes: 58 additions & 2 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,25 @@ <h2>Example</h2>
<input type="text" name="tags" value="One, Five" data-provide="tag">
</div>
<pre class="prettyprint linenums">&lt;input type="text" name="tags" data-provide="tag"&gt;</pre>

<p>Heres a javascript example semi-colon separated values. Separated by semi-colon (186), return/enter (13) and tab (9)</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" name="tags" value="Texas, USA; Nevada; New York, USA" id="tags">
</div>
<pre class="prettyprint linenums">
&lt;script&gt;
$(function() {
var usStates = [&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;];

$('#tags').tag({
autocompleteOnKey: 186,
addKeys: [186, 13, 9],
source: usStates,
separator: ';'
})
})
&lt;/script&gt;</pre>

<hr class="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
Expand Down Expand Up @@ -77,6 +96,24 @@ <h3>Options</h3>
<td>false</td>
<td>Autocomplete on comma type with the first suggested value (if any).</td>
</tr>
<tr>
<td>autocompleteOnKey</td>
<td>int</td>
<td>-1</td>
<td>Autocomplete on this keyCode (188 for comma) type with the first suggested value (if any).</td>
</tr>
<tr>
<td>addKeys</td>
<td>array</td>
<td>[188, 13, 9]</td>
<td>Add the tag if any of these keys are pressed. Default Comma (188), Return/Enter (13) and Tab (9)</td>
</tr>
<tr>
<td>separator</td>
<td>string</td>
<td>','</td>
<td>The main separator of the input value. Comma as default</td>
</tr>
</tbody>
</table>
<h3>Methods</h3>
Expand All @@ -92,6 +129,10 @@ <h3>Events</h3>
</tr>
</thead>
<tbody>
<tr>
<td>add</td>
<td>This event is fired immediately before a tag will be added. The event handler will pass an object <code>obj.value</code> for you to get or modify.</td>
</tr>
<tr>
<td>added</td>
<td>This event is fired immediately after a tag has been successfully added. The event handler will be passed the <code>value</code> that was added.</td>
Expand All @@ -103,9 +144,12 @@ <h3>Events</h3>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#myTag').on('added', function (e, value) {
$('#myTag').on('add', function (e, t) {
t.value = t.value.split(' - ')[0];
// do other things before we add...
}).on('added', function(e, value) {
// do something...
})</pre>
}</pre>
</section>
</div>
</div>
Expand All @@ -121,5 +165,17 @@ <h3>Events</h3>
})
}(window.jQuery)
</script>
<script>
$(function() {
var usStates = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"];

$('#tags').tag({
autocompleteOnKey: 186,
addKeys: [186, 13, 9],
source: usStates,
separator: ';'
})
})
</script>
</body>
</html>
19 changes: 13 additions & 6 deletions js/bootstrap-tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
var Tag = function ( element, options ) {
this.element = $(element)
this.options = $.extend(true, {}, $.fn.tag.defaults, options)
this.values = $.grep($.map(this.element.val().split(','), $.trim), function ( value ) { return value.length > 0 })
this.values = $.grep($.map(this.element.val().split(this.options.separator), $.trim), function ( value ) { return value.length > 0 })
this.show()
}

Expand Down Expand Up @@ -63,12 +63,12 @@
that.skip = false
})
.on('keydown', function ( event ) {
if ( event.keyCode == 188 || event.keyCode == 13 || event.keyCode == 9 ) {
if ( $.inArray(event.keyCode, that.options.addKeys) !== -1 && event.keyCode != 8 ) {
if ( $.trim($(this).val()) && ( !that.element.siblings('.typeahead').length || that.element.siblings('.typeahead').is(':hidden') ) ) {
if ( event.keyCode != 9 ) event.preventDefault()
that.process()
} else if ( event.keyCode == 188 ) {
if ( !that.options.autocompleteOnComma ) {
} else if ( event.keyCode == 188 || event.keyCode == that.options.autocompleteOnKey ) {
if ( !that.options.autocompleteOnComma && that.options.autocompleteOnKey === -1 ) {
event.preventDefault()
that.process()
}
Expand Down Expand Up @@ -136,6 +136,10 @@
, add: function ( value ) {
var that = this

var addValue = {value: value};
this.element.trigger('add', addValue);
value = addValue.value;

if ( !that.options.allowDuplicates ) {
var index = that.inValues(value)
if ( index != -1 ) {
Expand All @@ -151,7 +155,7 @@
this.values.push(value)
this.createBadge(value)

this.element.val(this.values.join(', '))
this.element.val(this.values.join(that.options.separator + ' '))
this.element.trigger('added', [value])
}
, remove: function ( index ) {
Expand All @@ -164,7 +168,7 @@
}
}
, process: function () {
var values = $.grep($.map(this.input.val().split(','), $.trim), function ( value ) { return value.length > 0 }),
var values = $.grep($.map(this.input.val().split(this.options.separator), $.trim), function ( value ) { return value.length > 0 }),
that = this
$.each(values, function() {
that.add(this)
Expand All @@ -190,7 +194,10 @@
allowDuplicates: false
, caseInsensitive: true
, autocompleteOnComma: false
, autocompleteOnKey: -1
, placeholder: ''
, addKeys: [188, 13, 9]
, separator: ','
, source: []
}

Expand Down