Skip to content

B
bootstrap
Commit 4478df76 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

first pass at ultra basic autocomplete

parent 961c4794
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 359 deletions
bootstrap.css
View file @ 4478df76
This diff is collapsed.
bootstrap.min.css
View file @ 4478df76
This diff is collapsed.
docs/javascript.html
View file @ 4478df76
......@@ -23,48 +23,6 @@
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!-- Le javascript -->
<!-- placed up here so that the inline demos can be next to their markup -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
// NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
$(document).ready(function() {
$('.nav .active').click(function(e) {
e.preventDefault();
$(this).siblings().toggle();
});
});
</script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="../js/bootstrap-transition.js"></script>
<script src="../js/bootstrap-alert.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="../js/bootstrap-tab.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
<script src="../js/bootstrap-popover.js"></script>
<script src="../js/bootstrap-button.js"></script>
<script>
$(function () {
// twipsy demo
$("a[rel=twipsy]").twipsy({
live: true
})
//popover demo
$("a[rel=popover]")
.popover({
offset: 10
})
.click(function(e) {
e.preventDefault()
})
})
</script>
</head>
<body id="bootstrap-js">
......@@ -163,6 +121,10 @@
<td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td>
<td>A plugin for rotating through elements. A merry-go-round.</td>
</tr>
<tr>
<td><a href="./javascript.html#typeahead">bootstrap-typeahead.js</a></td>
<td>A basic, easily extended plugin for quickly creating elegant typeaheads.</td>
</tr>
</tbody>
</table>
<h3>Is javascript necessary?</h3>
......@@ -1151,6 +1113,54 @@ $('.myCarousel').carousel({
</div>
</section>
<!-- Typeahead
================================================== -->
<section id="typeahead">
<div class="page-header">
<h1>Typeahead <small>bootstrap-typeahead.js</small></h1>
</div>
<div class="row">
<div class="span3 columns">
<p>A basic, easily extended plugin for quickly creating elegant typeaheads.</p>
<a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
</div>
<div class="span9 columns">
<h3>Using bootstrap-typeahead.js</h3>
<pre class="prettyprint linenums">$('.typeahead').typeahead()</pre>
<h3>Options</h3>
<table class="bordered-table striped-table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>items</td>
<td>number</td>
<td>8</td>
<td>The max number of items to display in the dropdown.</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
<p>Add data attributes to register an element with typeahead functionality.</p>
<pre class="prettyprint linenums">
&lt;input type="text" data-provide="typeahead" /&gt;
</pre>
<h3>Demo</h3>
<input type="text" data-provide="typeahead" data-items="4" data-data='["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"]'>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer class="footer">
......@@ -1178,6 +1188,7 @@ $('.myCarousel').carousel({
<script src="../js/bootstrap-button.js"></script>
<script src="../js/bootstrap-collapse.js"></script>
<script src="../js/bootstrap-carousel.js"></script>
<script src="../js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
<script>
$(function () {
......
js/bootstrap-typeahead.js
View file @ 4478df76
......@@ -34,80 +34,102 @@
constructor: Typeahead
, matcher: function(item, query) {
, matcher: function (item, query) {
return ~item.indexOf(query)
}
, select: function(event) {
this.$element.val($(event.target).attr('data-value'))
this.hide()
, select: function () {
var val = this.$menu.find('.active').attr('data-value')
this.$element.val(val)
return this.hide()
}
, show: function () {
this.shown = true
var pos = $.extend({}, this.$element.offset(), {
height: this.$element[0].offsetHeight
})
this.$menu.css({
top: pos.top + pos.height
, left: pos.left
})
this.$menu.show()
this.shown = true
return this
}
, hide: function () {
this.shown = false
this.$menu.hide()
this.shown = false
return this
}
, lookup: function (event) {
var query = this.$element.val()
, that = this
, items
if (!query) {
return this.shown ? this.hide() : this
}
var items = this.data.filter(function (item) {
if (that.matcher(item, query)) {
return item
}
items = this.data.filter(function (item) {
if (that.matcher(item, query)) return item
})
if (!items.length) {
return this.shown ? this.hide() : this
}
return this.render(items).show()
return this.render(items.slice(0, this.options.items)).show()
}
, render: function(items) {
, render: function (items) {
var that = this
items = $(items).map(function (i, item) {
return $(that.options.item)
.text(item)
.attr('data-value', item)[0]
i = $(that.options.item).attr('data-value', item)
i.find('a').text(item)
return i[0]
})
items.first().addClass('active')
this.$menu.append(items)
this.$menu.html(items)
return this
}
, next: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, next = active.next() || $(this.$menu.find('li')[0])
, next = active.next()
if (!next.length) {
next = $(this.$menu.find('li')[0])
}
next.addClass('active')
}
, prev: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, next = active.prev() || this.$menu.find('li').last()
, prev = active.prev()
next.addClass('active')
if (!prev.length) {
prev = this.$menu.find('li').last()
}
prev.addClass('active')
}
, keyup: function () {
event
.stopPropagation()
.preventDefault()
, keyup: function (e) {
e.stopPropagation()
e.preventDefault()
switch(e.keyCode) {
case 40: // down arrow
case 38: // up arrow
break
switch(event.keyCode) {
case 9: // tab
case 13: // enter
this.select()
......@@ -120,51 +142,68 @@
default:
this.lookup()
}
}
, keypress: function (event) {
event.stopPropagation()
switch(event.keyCode) {
, keypress: function (e) {
e.stopPropagation()
switch(e.keyCode) {
case 9: // tab
case 13: // enter
case 27: // escape
event.preventDefault()
e.preventDefault()
break
case 38: // up arrow
e.preventDefault()
this.prev()
event.preventDefault()
break
case 40: // down arrow
e.preventDefault()
this.next()
event.preventDefault()
break
}
}
}
, blur: function (e) {
var that = this
e.stopPropagation()
e.preventDefault()
setTimeout(function () { that.hide() }, 150)
}
, click: function (e) {
e.stopPropagation()
e.preventDefault()
this.select()
}
, mouseenter: function (e) {
this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active')
}
, listen: function () {
this.$element
.on('focus', this.show)
.on('blur', $.proxy(this.hide, this))
.on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', this.keyup)
.on('change', $.proxy(this.lookup, this))
.on('keyup', $.proxy(this.keyup, this))
if ($.browser.webkit || $.browser.msie) {
this.$element.on('keydown', this.keypress)
this.$element.on('keydown', $.proxy(this.keypress, this))
}
this.$menu
.on('click', '* > *', $.proxy(this.select, this))
.on('mouseenter', function () {
/* remove selected class, add to mouseover */
})
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
}
}
/* TYPEAHEAD PLUGIN DEFINITION
* ============================== */
* =========================== */
$.fn.typeahead = function ( option ) {
return this.each(function () {
......@@ -177,14 +216,24 @@
}
$.fn.typeahead.defaults = {
data: null
, items: 8
, empty: false
, noresults: false
, menu: '<ul class="dropdown-menu"></ul>'
, item: '<li></li>'
items: 8
, menu: '<ul class="typeahead dropdown-menu"></ul>'
, item: '<li><a href="#"></a></li>'
}
$.fn.typeahead.Constructor = Typeahead
/* TYPEAHEAD DATA-API
* ================== */
$(function () {
$('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
var $this = $(this)
if ($this.data('typeahead')) return
e.preventDefault()
$this.typeahead($this.data())
})
})
}( window.jQuery )
\ No newline at end of file
js/tests/unit/bootstrap-typeahead.js
View file @ 4478df76
......@@ -13,11 +13,9 @@ $(function () {
test("should listen to an input", function () {
var $input = $('<input />')
$input.typeahead()
ok($input.data('events').focus, 'has a focus event')
ok($input.data('events').blur, 'has a blur event')
ok($input.data('events').keypress, 'has a keypress event')
ok($input.data('events').keyup, 'has a keyup event')
ok($input.data('events').change, 'has a change event')
if ($.browser.webkit || $.browser.msie) {
ok($input.data('events').keydown, 'has a keydown event')
} else {
......@@ -44,7 +42,8 @@ $(function () {
})
, typeahead = $input.data('typeahead')
$input.val('a').change()
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
......@@ -54,12 +53,14 @@ $(function () {
})
test("should hide menu when query entered", function () {
stop()
var $input = $('<input />').typeahead({
data: ['aa', 'ab', 'ac']
})
, typeahead = $input.data('typeahead')
$input.val('a').change()
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
......@@ -67,7 +68,10 @@ $(function () {
$input.blur()
ok(!typeahead.$menu.is(":visible"), "typeahead is no longer visible")
setTimeout(function () {
ok(!typeahead.$menu.is(":visible"), "typeahead is no longer visible")
start()
}, 200)
typeahead.$menu.remove()
})
......@@ -78,7 +82,8 @@ $(function () {
})
, typeahead = $input.data('typeahead')
$input.val('a').change()
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
......@@ -110,9 +115,10 @@ $(function () {
})
, typeahead = $input.data('typeahead')
$input.val('a').change()
$input.val('a')
typeahead.lookup()
$(typeahead.$menu.find('li')[2]).trigger('click')
$(typeahead.$menu.find('li')[2]).mouseover().click()
equals($input.val(), 'ac', 'input value was correctly set')
ok(!typeahead.$menu.is(':visible'), 'the menu was hidden')
......
lib/dropdowns.less
View file @ 4478df76
......@@ -68,16 +68,17 @@
font-weight: normal;
line-height: 18px;
color: @gray;
// Hover state
&:hover {
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(@blue, @blueDark);
#gradient > .vertical(@linkColor, darken(@linkColor, 5%));
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
.box-shadow(@shadow);
}
}
// Hover state
&.typeahead .active a, a:hover {
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
#gradient > .vertical(@blue, @blueDark);
#gradient > .vertical(@linkColor, darken(@linkColor, 5%));
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
.box-shadow(@shadow);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment