").text(displayFn(context));
+ return $('
').attr("id", _.guid()).text(displayFn(context));
}
}
function isValidName(str) {
@@ -884,10 +940,11 @@
this.trigger.apply(this, arguments);
},
_allDatasetsEmpty: function allDatasetsEmpty() {
- return _.every(this.datasets, isDatasetEmpty);
- function isDatasetEmpty(dataset) {
- return dataset.isEmpty();
- }
+ return _.every(this.datasets, _.bind(function isDatasetEmpty(dataset) {
+ var isEmpty = dataset.isEmpty();
+ this.$node.attr("aria-expanded", !isEmpty);
+ return isEmpty;
+ }, this));
},
_getSelectables: function getSelectables() {
return this.$node.find(this.selectors.selectable);
@@ -912,6 +969,12 @@
var that = this, onSelectableClick;
onSelectableClick = _.bind(this._onSelectableClick, this);
this.$node.on("click.tt", this.selectors.selectable, onSelectableClick);
+ this.$node.on("mouseover", this.selectors.selectable, function() {
+ that.setCursor($(this));
+ });
+ this.$node.on("mouseleave", function() {
+ that._removeCursor();
+ });
_.each(this.datasets, function(dataset) {
dataset.onSync("asyncRequested", that._propagate, that).onSync("asyncCanceled", that._propagate, that).onSync("asyncReceived", that._propagate, that).onSync("rendered", that._onRendered, that).onSync("cleared", that._onCleared, that);
});
@@ -921,9 +984,11 @@
return this.$node.hasClass(this.classes.open);
},
open: function open() {
+ this.$node.scrollTop(0);
this.$node.addClass(this.classes.open);
},
close: function close() {
+ this.$node.attr("aria-expanded", false);
this.$node.removeClass(this.classes.open);
this._removeCursor();
},
@@ -988,6 +1053,55 @@
});
return Menu;
}();
+ var Status = function() {
+ "use strict";
+ function Status(options) {
+ this.$el = $("", {
+ role: "status",
+ "aria-live": "polite"
+ }).css({
+ position: "absolute",
+ padding: "0",
+ border: "0",
+ height: "1px",
+ width: "1px",
+ "margin-bottom": "-1px",
+ "margin-right": "-1px",
+ overflow: "hidden",
+ clip: "rect(0 0 0 0)",
+ "white-space": "nowrap"
+ });
+ options.$input.after(this.$el);
+ _.each(options.menu.datasets, _.bind(function(dataset) {
+ if (dataset.onSync) {
+ dataset.onSync("rendered", _.bind(this.update, this));
+ dataset.onSync("cleared", _.bind(this.cleared, this));
+ }
+ }, this));
+ }
+ _.mixin(Status.prototype, {
+ update: function update(event, suggestions) {
+ var length = suggestions.length;
+ var words;
+ if (length === 1) {
+ words = {
+ result: "result",
+ is: "is"
+ };
+ } else {
+ words = {
+ result: "results",
+ is: "are"
+ };
+ }
+ this.$el.text(length + " " + words.result + " " + words.is + " available, use up and down arrow keys to navigate.");
+ },
+ cleared: function() {
+ this.$el.text("");
+ }
+ });
+ return Status;
+ }();
var DefaultMenu = function() {
"use strict";
var s = Menu.prototype;
@@ -1052,6 +1166,7 @@
this.input = o.input;
this.menu = o.menu;
this.enabled = true;
+ this.autoselect = !!o.autoselect;
this.active = false;
this.input.hasFocus() && this.activate();
this.dir = this.input.getLangDir();
@@ -1098,8 +1213,12 @@
_onDatasetCleared: function onDatasetCleared() {
this._updateHint();
},
- _onDatasetRendered: function onDatasetRendered(type, dataset, suggestions, async) {
+ _onDatasetRendered: function onDatasetRendered(type, suggestions, async, dataset) {
this._updateHint();
+ if (this.autoselect) {
+ var cursorClass = this.selectors.cursor.substr(1);
+ this.menu.$node.find(this.selectors.suggestion).first().addClass(cursorClass);
+ }
this.eventBus.trigger("render", suggestions, async, dataset);
},
_onAsyncRequested: function onAsyncRequested(type, dataset, query) {
@@ -1122,7 +1241,15 @@
_onEnterKeyed: function onEnterKeyed(type, $e) {
var $selectable;
if ($selectable = this.menu.getActiveSelectable()) {
- this.select($selectable) && $e.preventDefault();
+ if (this.select($selectable)) {
+ $e.preventDefault();
+ $e.stopPropagation();
+ }
+ } else if (this.autoselect) {
+ if (this.select(this.menu.getTopSelectable())) {
+ $e.preventDefault();
+ $e.stopPropagation();
+ }
}
},
_onTabKeyed: function onTabKeyed(type, $e) {
@@ -1144,12 +1271,12 @@
},
_onLeftKeyed: function onLeftKeyed() {
if (this.dir === "rtl" && this.input.isCursorAtEnd()) {
- this.autocomplete(this.menu.getTopSelectable());
+ this.autocomplete(this.menu.getActiveSelectable() || this.menu.getTopSelectable());
}
},
_onRightKeyed: function onRightKeyed() {
if (this.dir === "ltr" && this.input.isCursorAtEnd()) {
- this.autocomplete(this.menu.getTopSelectable());
+ this.autocomplete(this.menu.getActiveSelectable() || this.menu.getTopSelectable());
}
},
_onQueryChanged: function onQueryChanged(e, query) {
@@ -1249,9 +1376,9 @@
},
select: function select($selectable) {
var data = this.menu.getSelectableData($selectable);
- if (data && !this.eventBus.before("select", data.obj)) {
+ if (data && !this.eventBus.before("select", data.obj, data.dataset)) {
this.input.setQuery(data.val, true);
- this.eventBus.trigger("select", data.obj);
+ this.eventBus.trigger("select", data.obj, data.dataset);
this.close();
return true;
}
@@ -1262,21 +1389,24 @@
query = this.input.getQuery();
data = this.menu.getSelectableData($selectable);
isValid = data && query !== data.val;
- if (isValid && !this.eventBus.before("autocomplete", data.obj)) {
+ if (isValid && !this.eventBus.before("autocomplete", data.obj, data.dataset)) {
this.input.setQuery(data.val);
- this.eventBus.trigger("autocomplete", data.obj);
+ this.eventBus.trigger("autocomplete", data.obj, data.dataset);
return true;
}
return false;
},
moveCursor: function moveCursor(delta) {
- var query, $candidate, data, payload, cancelMove;
+ var query, $candidate, data, suggestion, datasetName, cancelMove, id;
query = this.input.getQuery();
$candidate = this.menu.selectableRelativeToCursor(delta);
data = this.menu.getSelectableData($candidate);
- payload = data ? data.obj : null;
+ suggestion = data ? data.obj : null;
+ datasetName = data ? data.dataset : null;
+ id = $candidate ? $candidate.attr("id") : null;
+ this.input.trigger("cursorchange", id);
cancelMove = this._minLengthMet() && this.menu.update(query);
- if (!cancelMove && !this.eventBus.before("cursorchange", payload)) {
+ if (!cancelMove && !this.eventBus.before("cursorchange", suggestion, datasetName)) {
this.menu.setCursor($candidate);
if (data) {
this.input.setInputValue(data.val);
@@ -1284,7 +1414,7 @@
this.input.resetInputValue();
this._updateHint();
}
- this.eventBus.trigger("cursorchange", payload);
+ this.eventBus.trigger("cursorchange", suggestion, datasetName);
return true;
}
return false;
@@ -1322,7 +1452,7 @@
www = WWW(o.classNames);
return this.each(attach);
function attach() {
- var $input, $wrapper, $hint, $menu, defaultHint, defaultMenu, eventBus, input, menu, typeahead, MenuConstructor;
+ var $input, $wrapper, $hint, $menu, defaultHint, defaultMenu, eventBus, input, menu, status, typeahead, MenuConstructor;
_.each(datasets, function(d) {
d.highlight = !!o.highlight;
});
@@ -1353,11 +1483,16 @@
node: $menu,
datasets: datasets
}, www);
+ status = new Status({
+ $input: $input,
+ menu: menu
+ });
typeahead = new Typeahead({
input: input,
menu: menu,
eventBus: eventBus,
- minLength: o.minLength
+ minLength: o.minLength,
+ autoselect: o.autoselect
}, www);
$input.data(keys.www, www);
$input.data(keys.typeahead, typeahead);
@@ -1450,7 +1585,7 @@
return query;
} else {
ttEach(this, function(t) {
- t.setVal(newVal);
+ t.setVal(_.toStr(newVal));
});
return this;
}
@@ -1481,8 +1616,10 @@
});
}
function buildHintFromInput($input, www) {
- return $input.clone().addClass(www.classes.hint).removeData().css(www.css.hint).css(getBackgroundStyles($input)).prop("readonly", true).removeAttr("id name placeholder required").attr({
- autocomplete: "off",
+ return $input.clone().addClass(www.classes.hint).removeData().css(www.css.hint).css(getBackgroundStyles($input)).prop({
+ readonly: true,
+ required: false
+ }).removeAttr("id name placeholder").removeClass("required").attr({
spellcheck: "false",
tabindex: -1
});
@@ -1495,7 +1632,6 @@
style: $input.attr("style")
});
$input.addClass(www.classes.input).attr({
- autocomplete: "off",
spellcheck: false
});
try {