Skip to content

Commit

Permalink
Merge pull request #84 from MissChocoe/master
Browse files Browse the repository at this point in the history 
Added flexible support for json object in the source
  • Loading branch information
@bassjobsen
bassjobsen committed Dec 2, 2014
2 parents f7b095a + 7125b22 commit 0f3264e
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 18 deletions.
42 changes: 36 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,6 @@ Destroys previously initialized typeaheads. This entails reverting DOM modificat

$('.typeahead').typeahead('destroy')

Also read: [How to Use JSON Objects With Twitter Bootstrap Typeahead](http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/)

Javascript Example
=============

Expand All @@ -62,7 +60,32 @@ Loading a collection
},'json');
//example_collection.json
// ["item1","item2","item3"]

Using JSON objects instead of simple strings
--------------------------------------------

You can add all the properties you wish on your objects, as long as you provide a "name" attribute OR you provide your own displayText method. The other values are for you, to be able to match the selected item with something in your model.

var $input = $('.typeahead');
$input.typeahead({source:[{id: "someId1", name: "Display name 1"},
{id: "someId2", name: "Display name 2"}],
autoSelect: true});
$input.change(function() {
var current = $input.typeahead("getActive");
if (current) {
// Some item from your model is active!
if (current.name == $input.val()) {
// This means the exact match is found. Use toLowerCase() if you want case insensitive match.
} else {
// This means it is only a partial match, you can either add a new item
// or take the active if you don't want new items
}
} else {
// Nothing is active so it is a new value (or maybe empty value)
}
});


Options
=======

Expand All @@ -82,7 +105,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>source</td>
<td>array, function</td>
<td>[ ]</td>
<td>The data source to query against. May be an array of strings or a function. The function accepts two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
<td>The data source to query against. May be an array of strings, an array of JSON object with a name property or a function. The function accepts two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
</tr>
<tr>
<td>items</td>
Expand Down Expand Up @@ -131,6 +154,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>function</td>
<td>highlights all default matches</td>
<td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
</tr>
<tr>
<td>displayText</td>
<td>function</td>
<td>item.name || item</td>
<td>Method used to get textual representation of an item of the sources. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return a String.</td>
</tr>
<tr>
<td>autoSelect</td>
Expand All @@ -142,7 +171,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>afterSelect</td>
<td>function</td>
<td>$.noop()</td>
<td>Call back function to execute after selected an item. </td>
<td>Call back function to execute after selected an item. It gets the current active item in parameter if any.</td>
</tr>
<tr>
<td>delay</td>
Expand All @@ -157,10 +186,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
Methods
=======

.typeahead(options)
.typeahead(options): Initializes an input with a typeahead.
.lookup: To trigger the lookup function externally
.getActive: To get the currently active item, you will get a String or a JSOn object depending on how you initialized typeahead. Works only for the first match.


Initializes an input with a typeahead.

Bower
=====
Expand Down
51 changes: 39 additions & 12 deletions bootstrap3-typeahead.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
this.highlighter = this.options.highlighter || this.highlighter;
this.render = this.options.render || this.render;
this.updater = this.options.updater || this.updater;
this.displayText = this.options.displayText || this.displayText;
this.source = this.options.source;
this.delay = this.options.delay;
this.$menu = $(this.options.menu);
Expand All @@ -71,11 +72,13 @@

, select: function () {
var val = this.$menu.find('.active').data('value');
this.$element.data("active", val);
if(this.autoSelect || val) {
var newVal = this.updater(val);
this.$element
.val(this.updater(val))
.val(newVal.name || newVal)
.change();
this.afterSelect();
this.afterSelect(newVal);
}
return this.hide();
}
Expand Down Expand Up @@ -123,7 +126,7 @@
this.query = this.$element.val() || '';
}

if ((this.query.length < this.options.minLength) && !this.showHintOnFocus) {
if (this.query.length < this.options.minLength) {
return this.shown ? this.hide() : this;
}

Expand All @@ -150,6 +153,12 @@
if (!items.length) {
return this.shown ? this.hide() : this;
}

if (items.length > 0) {
this.$element.data("active", items[0]);
} else {
this.$element.data("active", null);
}

if (this.options.items == 'all') {
return this.render(items).show();
Expand All @@ -159,7 +168,8 @@
}

, matcher: function (item) {
return ~item.toLowerCase().indexOf(this.query.toLowerCase());
var it = this.displayText(item);
return ~it.toLowerCase().indexOf(this.query.toLowerCase());
}

, sorter: function (items) {
Expand All @@ -169,8 +179,9 @@
, item;

while ((item = items.shift())) {
if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item);
else if (~item.indexOf(this.query)) caseSensitive.push(item);
var it = this.displayText(item);
if (!it.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item);
else if (~it.indexOf(this.query)) caseSensitive.push(item);
else caseInsensitive.push(item);
}

Expand Down Expand Up @@ -202,20 +213,32 @@

, render: function (items) {
var that = this;

var self = this;
var activeFound = false;
items = $(items).map(function (i, item) {
var text = self.displayText(item);
i = $(that.options.item).data('value', item);
i.find('a').html(that.highlighter(item));
i.find('a').html(that.highlighter(text));
if (text == self.$element.val()) {
i.addClass("active");
self.$element.data("active", item);
activeFound = true;
}
return i[0];
});

if (this.autoSelect) {
if (this.autoSelect && !activeFound) {
items.first().addClass('active');
this.$element.data("active", items.first().data('value'));
}
this.$menu.html(items);
return this;
}

, displayText: function(item) {
return item.name || item;
}

, next: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, next = active.next();
Expand Down Expand Up @@ -256,6 +279,7 @@
}
, destroy : function () {
this.$element.data('typeahead',null);
this.$element.data('active',null);
this.$element
.off('focus')
.off('blur')
Expand Down Expand Up @@ -308,7 +332,7 @@
, keydown: function (e) {
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]);
if (!this.shown && e.keyCode == 40) {
this.lookup("");
this.lookup();
} else {
this.move(e);
}
Expand Down Expand Up @@ -349,8 +373,8 @@
, focus: function (e) {
if (!this.focused) {
this.focused = true;
if (this.options.minLength === 0 && !this.$element.val() || this.options.showHintOnFocus) {
this.lookup();
if (this.options.showHintOnFocus) {
this.lookup("");
}
}
}
Expand Down Expand Up @@ -388,6 +412,9 @@

$.fn.typeahead = function (option) {
var arg = arguments;
if (typeof option == 'string' && option == "getActive") {
return this.data("active");
}
return this.each(function () {
var $this = $(this)
, data = $this.data('typeahead')
Expand Down

0 comments on commit 0f3264e

Please sign in to comment.