-
-
Save msurguy/3643734 to your computer and use it in GitHub Desktop.
Tokenahead - ghetto typeahead with facebook-like tokens 4 @couch <3
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) | |
$.fn.typeahead.Constructor.call(this, $('input', this.$wrapper), 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) | |
} | |
, listen: function () { | |
var that = this | |
$.fn.typeahead.Constructor.prototype.listen.call(this) | |
this.$wrapper | |
.on('click', 'a', function (e) { | |
e.stopPropagation() | |
}) | |
.on('click', '.close', function (e) { | |
$(this).parent().remove() | |
}) | |
.on('click', function () { | |
that.$element.focus() | |
}) | |
this.$element | |
.on('focus', function (e) { | |
if (!that.$element.val()) return that.isEmpty = true | |
}) | |
.on('keyup', function (e) { | |
var tokens | |
, value | |
if (e.keyCode == 13 && !that.shown && (value = that.$element.val())) { //enter with no menu and val | |
that.$element | |
.val('') | |
.change() | |
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.$wrapper) | |
if (!tokens.length) return | |
tokens.last().remove() | |
}) | |
.on('keypress keydown paste', function () { | |
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><button class="close">×</button></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
<!-- markup --> | |
<div class="input-xlarge uneditable-input tokenahead"> | |
<div class="measurer"></div> | |
<div class="tokens"></div> | |
<input type="text"> | |
</div> | |
<script> | |
$(function () { | |
$('.tokenahead').tokenahead({ | |
items: 4 | |
, source: ["fat","mdo","dhg"] | |
}) | |
}) | |
</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.less | |
// --------------- | |
.tokenahead { | |
cursor: text; | |
overflow: hidden; | |
height: auto; | |
padding-bottom: 0; | |
border-color: @inputBorder; | |
} | |
.tokenahead a { | |
cursor: default; | |
float: left; | |
display: inline-block; | |
border: 1px solid @inputBorder; | |
text-decoration: none; | |
padding: 0 4px; | |
margin: 0 3px 3px 0; | |
.border-radius(@inputBorderRadius); | |
} | |
.tokenahead a:hover { | |
color: @linkColor; | |
} | |
.tokenahead button.close { | |
font-size: 14px; | |
line-height: 14px; | |
margin-left: 4px; | |
} | |
.tokenahead .measurer { | |
position: absolute; | |
top: -1000px; | |
} | |
.tokenahead input { | |
border: none; | |
box-shadow: none; | |
float: left; | |
margin: 0 0 5px; | |
padding: 0; | |
width: 30px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment