Skip to content

Instantly share code, notes, and snippets.

@fadomire
Forked from fat/Tokenahead.less
Last active December 10, 2015 00:58
Show Gist options
  • Save fadomire/4354488 to your computer and use it in GitHub Desktop.
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...
!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">&times;</span></a>'
})
}(window.jQuery)
<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>
.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;
}
@mgray88
Copy link

mgray88 commented Jun 22, 2013

created a fiddle for anyone interested: http://jsfiddle.net/JjJeV/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment