Added 'matched' and 'mismatched' custom events on blur

This commit is contained in:
Albert Kwong
2013-11-22 21:36:55 +08:00
parent 2bd1119ecd
commit 3902c40bd0
4 changed files with 54 additions and 2 deletions

View File

@@ -197,6 +197,10 @@ typeahead.js triggers the following custom events:
* `typeahead:autocompleted`  Triggered when the query is autocompleted. The datum used for autocompletion is passed to the event handler as an argument in addition to the name of the dataset it originated from.
* `typeahead:matched` - Triggered when the input loses focus and there is exactly one suggestion. The matching datum is passed to the event handler as an argument in addition to the name of the dataset it originated from. Autocomplete will not occur in this case.
* `typeahead:mismatched` - Triggered when the input loses focus and either there are no suggestions or more than one suggestion.
All custom events are triggered on the element initialized as a typeahead.
### Template Engine Compatibility

20
dist/typeahead.js vendored
View File

@@ -914,7 +914,7 @@
this.inputView = new InputView({
input: $input,
hint: $hint
}).on("focused", this._openDropdown).on("blured", this._closeDropdown).on("blured", this._setInputValueToQuery).on("enterKeyed tabKeyed", this._handleSelection).on("queryChanged", this._clearHint).on("queryChanged", this._clearSuggestions).on("queryChanged", this._getSuggestions).on("whitespaceChanged", this._updateHint).on("queryChanged whitespaceChanged", this._openDropdown).on("queryChanged whitespaceChanged", this._setLanguageDirection).on("escKeyed", this._closeDropdown).on("escKeyed", this._setInputValueToQuery).on("tabKeyed upKeyed downKeyed", this._managePreventDefault).on("upKeyed downKeyed", this._moveDropdownCursor).on("upKeyed downKeyed", this._openDropdown).on("tabKeyed leftKeyed rightKeyed", this._autocomplete);
}).on("focused", this._openDropdown).on("blured", this._closeDropdown).on("blured", this._setInputValueToQuery).on("blured", this._checkMismatch).on("enterKeyed tabKeyed", this._handleSelection).on("queryChanged", this._clearHint).on("queryChanged", this._clearSuggestions).on("queryChanged", this._getSuggestions).on("whitespaceChanged", this._updateHint).on("queryChanged whitespaceChanged", this._openDropdown).on("queryChanged whitespaceChanged", this._setLanguageDirection).on("escKeyed", this._closeDropdown).on("escKeyed", this._setInputValueToQuery).on("tabKeyed upKeyed downKeyed", this._managePreventDefault).on("upKeyed downKeyed", this._moveDropdownCursor).on("upKeyed downKeyed", this._openDropdown).on("tabKeyed leftKeyed rightKeyed", this._autocomplete);
}
utils.mixin(TypeaheadView.prototype, EventTarget, {
_managePreventDefault: function(e) {
@@ -986,6 +986,24 @@
this.eventBus.trigger("selected", suggestion.datum, suggestion.dataset);
}
},
_checkMismatch: function() {
var that = this, query = this.inputView.getQuery();
if (utils.isBlankString(query)) {
this.eventBus.trigger("mismatched");
return;
}
utils.each(this.datasets, function(i, dataset) {
dataset.getSuggestions(query, function(suggestions) {
var matches = suggestions.length;
if (matches == 1) {
suggestion = suggestions[0];
that.eventBus.trigger("matched", suggestion.datum, suggestion.dataset);
} else {
that.eventBus.trigger("mismatched");
}
});
});
},
_getSuggestions: function() {
var that = this, query = this.inputView.getQuery();
if (utils.isBlankString(query)) {

File diff suppressed because one or more lines are too long

View File

@@ -87,6 +87,7 @@ var TypeaheadView = (function() {
.on('focused', this._openDropdown)
.on('blured', this._closeDropdown)
.on('blured', this._setInputValueToQuery)
.on('blured', this._checkMismatch)
.on('enterKeyed tabKeyed', this._handleSelection)
.on('queryChanged', this._clearHint)
.on('queryChanged', this._clearSuggestions)
@@ -221,6 +222,35 @@ var TypeaheadView = (function() {
}
},
_checkMismatch: function() {
var that = this, query = this.inputView.getQuery();
if (utils.isBlankString(query)) {
this.eventBus.trigger('mismatched');
return;
}
// TODO check cache only, otherwise only works with single datasets
utils.each(this.datasets, function(i, dataset) {
dataset.getSuggestions(query, function(suggestions) {
var matches = suggestions.length;
if (matches == 1) {
suggestion = suggestions[0];
// let event handler decide whether to auto complete
that.eventBus.trigger(
'matched',
suggestion.datum,
suggestion.dataset
);
} else {
that.eventBus.trigger('mismatched');
}
});
});
},
_getSuggestions: function() {
var that = this, query = this.inputView.getQuery();