-
-
Save fadomire/4354488 to your computer and use it in GitHub Desktop.
Tags input : Added some features i needed for my use, based on Fat https://gist.github.com/2411033 implementation like : comma will now trigger a new tag, a cloned input is created and original input gets updated with tags value, some css tweaks...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function ($) { | |
"use strict"; // jshint ;_; | |
/* TOKENAHEAD PUBLIC CLASS DEFINITION | |
* ================================== */ | |
var Tokenahead = function (element, options) { | |
this.$wrapper = $(element) | |
this.$measurer = $('.measurer', this.$wrapper) | |
this.$tokens = $('.tokens', this.$wrapper) | |
this.$originalInput = $('input', this.$wrapper) | |
this.$clonedInput = $('input', this.$wrapper).clone().appendTo(this.$wrapper).attr('id','fake-input').attr('name','fake-input').val('') | |
this.$originalInput.hide() | |
$.fn.typeahead.Constructor.call(this, this.$clonedInput, options) | |
} | |
Tokenahead.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, { | |
constructor: Tokenahead | |
, updater: function (item) { | |
this.addToken(item) | |
return '' | |
} | |
, addToken: function (item) { | |
var token = $(this.options.token) | |
, text = $('<span></span>').text(item).appendTo(token) | |
token.appendTo(this.$tokens) | |
var tokenValue = $("span", this.$tokens).not(".close").map(function() { | |
return $(this).text(); | |
}).get(); | |
this.$originalInput.val(tokenValue) | |
} | |
, listen: function () { | |
var that = this | |
if(that.$element.val() || that.$tokens.children().length!=0){ | |
that.$element.attr("placeholder", ""); | |
that.$element.css("width","30") | |
} | |
$.fn.typeahead.Constructor.prototype.listen.call(this) | |
this.$wrapper | |
.on('click', 'a', function (e) { | |
e.stopPropagation() | |
}) | |
.on('click', '.close', function (e) { | |
$(this).parent().remove() | |
var tokenValue = $("span", that.$tokens).not(".close").map(function() { | |
return $(this).text(); | |
}).get(); | |
that.$originalInput.val(tokenValue) | |
that.$element.focus() | |
}) | |
.on('click', function () { | |
that.$element.focus() | |
}) | |
this.$element | |
.on('focus', function (e) { | |
that.$wrapper.addClass('focus'); | |
that.$element.attr("placeholder", ""); | |
if (!that.$element.val()) return that.isEmpty = true | |
}) | |
.on('blur', function (e) { | |
that.$wrapper.removeClass('focus') | |
}) | |
.on('keyup', function (e) { | |
var tokens | |
, value | |
if ((e.keyCode == 188 || e.keyCode == 13 )&& that.$element.val() != ',' && (value = that.$element.val())) { //enter with no menu and val | |
that.$element | |
.val('') | |
.change() | |
if(value.charAt(value.length-1) === ","){ | |
that.addToken(value.substring(0, value.length-1)) | |
}else{ | |
that.addToken(value) | |
} | |
return that.$element.focus() | |
} | |
if (e.keyCode != 8 || that.$element.val()) return that.isEmpty = false//backspace | |
if (!that.isEmpty) return that.isEmpty = true | |
tokens = $('a', that.$tokens) | |
if (!tokens.length) return | |
tokens.last().remove() | |
var tokenValue = $("span", that.$tokens).not(".close").map(function() { | |
return $(this).text(); | |
}).get(); | |
that.$originalInput.val(tokenValue) | |
}) | |
.on('keypress keydown paste', function (e) { | |
if(e.keyCode == 13){ | |
e.preventDefault(); | |
} | |
var value = that.$element.val() | |
that.$measurer.text(value) | |
that.$element.css('width', that.$measurer.width() + 30) | |
}) | |
} | |
}) | |
/* TOKENAHEAD PLUGIN DEFINITION | |
* ============================ */ | |
$.fn.tokenahead = function (option) { | |
return this.each(function () { | |
var $this = $(this) | |
, data = $this.data('tokenahead') | |
, options = typeof option == 'object' && option | |
if (!data) $this.data('tokenahead', (data = new Tokenahead(this, options))) | |
if (typeof option == 'string') data[option]() | |
}) | |
} | |
$.fn.tokenahead.Constructor = Tokenahead | |
$.fn.tokenahead.defaults = $.extend($.fn.typeahead.defaults, { | |
token: '<a class="tag"><span class="close">×</span></a>' | |
}) | |
}(window.jQuery) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="input-large uneditable-input tokenahead"> | |
<div class="measurer"></div> | |
<div class="tokens"></div> | |
<input type="text" autocomplete="off" placeholder="tags..."/> | |
</div> | |
<script> | |
$(function () { | |
$('.tokenahead').tokenahead({ | |
source: ["ruby", "java", "html", "css"], | |
matcher: function(item) { | |
item = $.trim(item); | |
return item.toLowerCase().substr(0, this.query.length).indexOf(this.query.toLowerCase()) !== -1 | |
} | |
}) | |
}) | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tokenahead { | |
cursor: text; | |
overflow: hidden; | |
height: auto; | |
padding-bottom: 0; | |
border-color:#ccc; | |
background-color:white; | |
} | |
.focus{ | |
border-color: rgba(82, 168, 236, 0.8); | |
outline: 0; | |
outline: thin dotted 9; | |
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); | |
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6); | |
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); | |
} | |
.tokenahead a.tag { | |
cursor: default; | |
float: left; | |
display: inline-block; | |
border: 1px solid #ccc; | |
text-decoration: none; | |
padding: 0 4px; | |
margin: 0 3px 3px 0; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
} | |
.tokenahead a:hover { | |
color: #08c; | |
} | |
.tokenahead span.close { | |
font-size: 14px; | |
line-height: 14px; | |
margin-left: 4px; | |
} | |
.tokenahead .measurer { | |
position: absolute; | |
top: -1000px; | |
} | |
.tokenahead input { | |
border: none; | |
box-shadow: none; | |
outline : none; | |
float: left; | |
margin: 0 0 5px; | |
padding: 0; | |
width: 100px; | |
} | |
.tokenahead input:focus { | |
border-color: none; | |
outline: 0; | |
outline: thin dotted 9; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
created a fiddle for anyone interested: http://jsfiddle.net/JjJeV/