懒了， 只翻译几个目前用到的属性，其实英文写的很明白的，需要花时间看而已。
注意， 标记overridable的方法都是可以重写的，如何重写见 “aui-autocomplete [ 一 ]”
注意， 标记overridable的方法都是可以重写的，如何重写见 “aui-autocomplete [ 一 ]”
AUI.add('aui-autocomplete', function(A) {
/**
* The AutoComplete Utility
*
* @module aui-autocomplete
*/
var Lang = A.Lang,
isArray = Lang.isArray,
isString = Lang.isString,
isNull = Lang.isNull,
isFunction = Lang.isFunction,
getClassName = A.ClassNameManager.getClassName,
ALERT = 'alert',
CONTENT = 'content',
HELPER = 'helper',
HIDDEN = 'hidden',
ICON = 'icon',
ITEM = 'item',
LIST = 'list',
LOADING = 'loading',
NAME = 'autocomplete',
RESET = 'reset',
RESULTS = 'results',
SELECTED = 'selected',
ICON_DEFAULT = 'circle-triangle-b',
ICON_ERROR = ALERT,
ICON_LOADING = LOADING,
CSS_HIGLIGHT = getClassName(NAME, SELECTED),
CSS_HIDDEN = getClassName(HELPER, HIDDEN),
CSS_LIST_ITEM = getClassName(NAME, LIST, ITEM),
CSS_RESULTS_LIST = getClassName(HELPER, RESET),
CSS_RESULTS_OVERLAY = getClassName(NAME, RESULTS),
CSS_RESULTS_OVERLAY_CONTENT = getClassName(NAME, RESULTS, CONTENT),
KEY_BACKSPACE = 8,
KEY_TAB = 9,
KEY_ENTER = 13,
KEY_SHIFT = 16,
KEY_CTRL = 17,
KEY_ALT = 18,
KEY_CAPS_LOCK = 20,
KEY_ESC = 27,
KEY_PAGEUP = 33,
KEY_END = 35,
KEY_HOME = 36,
KEY_UP = 38,
KEY_DOWN = 40,
KEY_RIGHT = 39,
KEY_LEFT = 37,
KEY_PRINT_SCREEN = 44,
KEY_INSERT = 44,
KEY_KOREAN_IME = 229,
OVERLAY_ALIGN = {
node: null,
points: ['tl', 'bl']
},
BOUNDING_BOX = 'boundingBox',
CONTENT_BOX = 'contentBox';
/**
* <p><img src="assets/images/aui-autocomplete/main.png"/></p>
*
* A base class for AutoComplete, providing:
* <ul>
* <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li>
* <li>Presenting users choices based on their input</li>
* <li>Separating selected items</li>
* <li>Keyboard interaction for selecting items</li>
* </ul>
*
* Quick Example:<br/>
*
* <pre><code>var instance = new A.AutoComplete({
* dataSource: [['AL', 'Alabama', 'The Heart of Dixie'],
* ['AK', 'Alaska', 'The Land of the Midnight Sun'],
* ['AZ', 'Arizona', 'The Grand Canyon State']],
* schema: {
* resultFields: ['key', 'name', 'description']
* },
* matchKey: 'name',
* delimChar: ',',
* typeAhead: true,
* contentBox: '#myAutoComplete'
* }).render();
* </code></pre>
*
* Check the list of <a href="AutoComplete.html#configattributes">Configuration Attributes</a> available for
* AutoComplete.
*
* @param config {Object} Object literal specifying widget configuration properties.
*
* @class AutoComplete
* @constructor
* @extends Component
*/
var AutoComplete = A.Component.create(
{
/**
* Static property provides a string to identify the class.
*
* @property AutoComplete.NAME
* @type String
* @static
*/
NAME: NAME,
/**
* Static property used to define the default attribute
* configuration for the AutoComplete.
*
* @property AutoComplete.ATTRS
* @type Object
* @static
*/
ATTRS: {
/**
* Always show the results container, instead of only showing when the
* user is requesting them.
*
* @attribute alwaysShowContainer
* @default false
* @type Boolean
*/
alwaysShowContainer: {
value: false
},
/**
* 结果集显示时高亮第一个item
* Automatically highlight the first item in the list when the results are
* made visible.
*
* @attribute autoHighlight
* @default true
* @type Boolean
*/
autoHighlight: {
value: true
},
/**
* If set to true, the <a href="AutoComplete.html#method_filterResults">filterResults</a>
* method will be run on the response from the data source.
*
* @attribute applyLocalFilter
* @default true
* @type Boolean
*/
applyLocalFilter: {
value: null
},
/**
* To use a button 是否需要右侧的button
*
* @attribute button
* @default true
* @type Boolean
* @deprecated
*/
button: {
value: true
},
/**
* The data source that results will be read from. This can either be
* an existing <a href="DataSource.html">DataSource</a> object, or it can be a
* value that would be passed to <a href="DataSource.html">DataSource</a>.
*
* @attribute dataSource
* @default null
* @type Object | String | Function | Array
*/
dataSource: {
value: null
},
/**
* The type of the data source passed into <a href="AutoComplete.html#config_dataSource">dataSource</a>.
* This can be used to explicitly declare what kind of <a href="DataSource.html">DataSource</a> object will
* be created.
*
* @attribute dataSourceType
* @default null
* @type String
*/
dataSourceType: {
value: null
},
/**
* 不设置，单选； 设置此项可多选，input框中多个选中值用delimChar分隔，如aa,bb,cc
* The character used to indicate the beginning or ending of a new value. Most commonly used
* is a ",".
*
* @attribute delimChar
* @default null
* @type String
*/
delimChar: {
value: null,
setter: function(value) {
if (isString(value) && (value.length > 0)) {
value = [value];
}
else if (!isArray(value)) {
value = A.Attribute.INVALID_VALUE;
}
return value;
}
},
/**
* The input field which will recieve the users input.
*
* @attribute input
* @default null
* @type String | Node
*/
input: {
value: null
},
/**
* 用schema中的哪一项匹配输入值, input默认显示选中项的matchKey字段
* The key or numeric index in the schema to match the result against.
*
* @attribute matchKey
* @default 0
* @type String | Number
*/
matchKey: {
value: 0
},
/**
* The maximum number of results to display. 结果集最大条数
*
*
* @attribute maxResultsDisplayed
* @default 10
* @type Number
*/
maxResultsDisplayed: {
value: 10
},
/**
* The minimum number of characters required to query the data source. 最少要输入多少个字符才会显示匹配结果集合
*
* @attribute minQueryLength
* @default 1
* @type Number
*/
minQueryLength: {
value: 1
},
/**
* The amount of time in seconds to delay before submitting the query.
*
* @attribute queryDelay
* @default 0.2
* @type Number
*/
queryDelay: {
value: 0.2,
getter: function(value) {
return value * 1000;
}
},
/**
* When IME usage is detected or interval detection is explicitly enabled,
* AutoComplete will detect the input value at the given interval and send a
* query if the value has changed.
*
* @attribute queryInterval
* @default 0.5
* @type Number
*/
queryInterval: {
value: 0.5,
getter: function(value) {
return value * 1000;
}
},
/**
* 匹配结果集时是否大小写敏感
* When <a href="AutoComplete.html#config_applyLocalFilter">applyLocalFilter</a> is true,
* setting this to true will match only results with the same case.
*
* @attribute queryMatchCase
* @default false
* @type Boolean
*/
queryMatchCase: {
value: false
},
/**
* false，从第一个字符开始匹配； true， 结果集中的item, 任意位置的字符与输入字符相同即匹配。
* When <a href="AutoComplete.html#config_applyLocalFilter">applyLocalFilter</a> is true,
* setting this to true will match results which contain the query anywhere in the text,
* instead of just matching just items that start with the query.
*
* @attribute queryMatchContains
* @default false
* @type Boolean
*/
queryMatchContains: {
value: false
},
/**
* For IO DataSources, AutoComplete will automatically insert a "?" between the server URI and
* the encoded query string. To prevent this behavior, you can
* set this value to false. If you need to customize this even further, you
* can override the <a href="AutoComplete.html#method_generateRequest">generateRequest</a> method.
*
* @attribute queryQuestionMark
* @default true
* @type Boolean
*/
queryQuestionMark: {
value: true
},
/**
* A valid configuration object for any of <a href="module_datasource.html">DataSource</a> schema plugins.
*
* @attribute schema
* @default null
* @type Object
*/
schema: {
value: null
},
/**
* A valid type of <a href="module_datasource.html">DataSource</a> schema plugin, such as array, json, xml, etc.
*
* @attribute schemaType
* @default array
* @type String
*/
schemaType: {
value: '',
validator: isString
},
/**
* Whether or not the input field should be updated with selections.
*
* @attribute suppressInputUpdate
* @default false
* @type Boolean
*/
suppressInputUpdate: {
value: false
},
/**
* autoHighlight = true时有效
* true, 自动选中第一个匹配结果，即使用户未输入完整， 同时更新值到input框中。
* If <a href="AutoComplete.html#config_autoHighlight">autoHighlight</a> is enabled, whether or not the
* input field should be automatically updated with the first result as the user types,
* automatically selecting the portion of the text the user has not typed yet.
*
* @attribute typeAhead
* @default false
* @type Boolean
*/
typeAhead: {
value: false
},
/**
* If <a href="AutoComplete.html#config_typeAhead">typeAhead</a> is true, number of seconds
* to delay before updating the input. In order to prevent certain race conditions, this value must
* always be greater than the <a href="AutoComplete.html#config_queryDelay">queryDelay</a>.
*
* @attribute typeAheadDelay
* @default 0.2
* @type Number
*/
typeAheadDelay: {
value: 0.2,
getter: function(value) {
return value * 1000;
}
},
/**
* 还没研究出来怎么用
* The unique ID of the input element.
*
* @attribute uniqueName
* @default null
* @type String
*/
uniqueName: {
value: null
}
},
prototype: {
/**
* Construction logic executed during AutoComplete instantiation. Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function(config) {
var instance = this;
instance._overlayAlign = A.mix({}, OVERLAY_ALIGN);
instance._createDataSource();
},
/**
* Create the DOM structure for the AutoComplete. Lifecycle.
*
* @method renderUI
* @protected
*/
renderUI: function() {
var instance = this;
instance._renderInput();
instance._renderOverlay();
},
/**
* Bind the events on the AutoComplete UI. Lifecycle.
*
* @method bindUI
* @protected
*/
bindUI: function() {
var instance = this;
var button = instance.button;
var inputNode = instance.inputNode;
instance.dataSource.on('request', A.bind(button.set, button, ICON, ICON_LOADING));
inputNode.on('blur', instance._onTextboxBlur, instance);
inputNode.on('focus', instance._onTextboxFocus, instance);
inputNode.on('keydown', instance._onTextboxKeyDown, instance);
inputNode.on('keypress', instance._onTextboxKeyPress, instance);
inputNode.on('keyup', instance._onTextboxKeyUp, instance);
var overlayBoundingBox = instance.overlay.get(BOUNDING_BOX);
overlayBoundingBox.on('click', instance._onContainerClick, instance);
overlayBoundingBox.on('mouseout', instance._onContainerMouseout, instance);
overlayBoundingBox.on('mouseover', instance._onContainerMouseover, instance);
overlayBoundingBox.on('scroll', instance._onContainerScroll, instance);
/**
* Handles the containerCollapse event. Fired when the container is hidden.
*
* @event containerCollapse
* @param {Event.Facade} event The containerCollapse event.
*/
instance.publish('containerCollapse');
/**
* Handles the containerExpand event. Fired when the container is shown.
*
* @event containerExpand
* @param {Event.Facade} event The containerExpand event.
*/
instance.publish('containerExpand');
/**
* Handles the containerPopulate event. Fired when the container is populated.
*
* @event containerPopulate
* @param {Event.Facade} event The containerPopulate event.
*/
instance.publish('containerPopulate');
/**
* Handles the dataError event. Fired when there is an error accessing the data.
*
* @event dataError
* @param {Event.Facade} event The dataError event.
*/
instance.publish('dataError');
/**
* Handles the dataRequest event. Fired when ever a query is sent to the data source.
*
* @event dataRequest
* @param {Event.Facade} event The dataRequest event.
*/
instance.publish('dataRequest');
/**
* Handles the dataReturn event. Fired when data successfully comes back from the data request.
*
* @event dataReturn
* @param {Event.Facade} event The dataReturn event.
*/
instance.publish('dataReturn');
/**
* Handles the itemArrowFrom event. Fired when the user navigates via the keyboard away from
* a selected item.
*
* @event itemArrowFrom
* @param {Event.Facade} event The itemArrowFrom event.
*/
instance.publish('itemArrowFrom');
/**
* Handles the itemArrowTo event. Fired when the user navigates via the keyboard to a selected item.
*
* @event itemArrowTo
* @param {Event.Facade} event The itemArrowTo event.
*/
instance.publish('itemArrowTo');
/**
* Handles the itemMouseOut event. Fired when the user mouses away from an item.
*
* @event itemMouseOut
* @param {Event.Facade} event The itemMouseOut event.
*/
instance.publish('itemMouseOut');
/**
* Handles the itemMouseOver event. Fired when the user mouses over an item.
*
* @event itemMouseOver
* @param {Event.Facade} event The itemMouseOver event.
*/
instance.publish('itemMouseOver');
/**
* Handles the itemSelect event. Fired when an item in the list is selected.
*
* @event itemSelect
* @param {Event.Facade} event The itemSelect event.
*/
instance.publish('itemSelect');
/**
* Handles the selectionEnforce event. Fired if <a href="Autocomplete.html#config_forceSelection">forceSelection</a>
* is enabled and the users input element has been cleared because it did not match one of the results.
*
* @event selectionEnforce
* @param {Event.Facade} event The selectionEnforce event.
*/
instance.publish('selectionEnforce');
/**
* Handles the textboxBlur event. Fired when the user leaves the input element.
*
* @event textboxBlur
* @param {Event.Facade} event The textboxBlur event.
*/
instance.publish('textboxBlur');
/**
* Handles the textboxChange event. Fired when the value in the input element is changed.
*
* @event textboxChange
* @param {Event.Facade} event The textboxChange event.
*/
instance.publish('textboxChange');
/**
* Handles the textboxFocus event. Fired when user moves focus to the input element.
*
* @event textboxFocus
* @param {Event.Facade} event The textboxFocus event.
*/
instance.publish('textboxFocus');
/**
* Handles the textboxKey event. Fired when the input element receives key input.
*
* @event textboxKey
* @param {Event.Facade} event The textboxKey event.
*/
instance.publish('textboxKey');
/**
* Handles the typeAhead event. Fired when the input element has been pre-filled by the type-ahead feature.
*
* @event typeAhead
* @param {Event.Facade} event The typeAhead event.
*/
instance.publish('typeAhead');
/**
* Handles the unmatchedItemSelect event. Fired when a user selects something that does
* not match any of the displayed results.
*
* @event unmatchedItemSelect
* @param {Event.Facade} event The unmatchedItemSelect event.
*/
instance.publish('unmatchedItemSelect');
instance.overlay.after('visibleChange', instance._realignContainer, instance);
},
/**
* Sync the AutoComplete UI. Lifecycle.
*
* @method syncUI
* @protected
*/
syncUI: function() {
var instance = this;
instance.inputNode.setAttribute('autocomplete', 'off');
},
/**
* An overridable method that is executed before the result container is shown.
* The method can return false to prevent the container from being shown.
*
* @method doBeforeExpandContainer
* @param {String} query The query that was submitted to the data source
* @param {Object} allResults The parsed results
* @return {Boolean}
*/
doBeforeExpandContainer: function() {
return true;
},
/**
* An overridable method that is executed before the result overlay is loaded with results.
*
* @method doBeforeLoadData
* @param {EventFacade} event
* @return {Boolean}
*/
doBeforeLoadData: function(event) {
return true;
},
/**
* Executed by the data source as a mechanism to do simple client-side
* filtering of the results.
*
* @method filterResults
* @param {EventFacade} event
* @return {Object} Filtered response object
*/
filterResults: function(event) {
var instance = this;
var callback = event.callback;
var query = event.request;
var response = event.response;
if (callback && callback.argument && callback.argument.query) {
query = callback.argument.query;
}
if (query) {
var dataSource = instance.dataSource;
var allResults = response.results;
var filteredResults = [];
var matchFound = false;
var matchKey = instance.get('matchKey');
var matchCase = instance.get('queryMatchCase');
var matchContains = instance.get('queryMatchContains');
var showAll = (query == '*');
var fields = instance.get('schema.resultFields');
for (var i = allResults.length - 1; i >= 0; i--){
var result = allResults[i];
var strResult = null;
if (isString(result)) {
strResult = result;
}
else if (isArray(result)) {
strResult = result[0];
}
else if (fields) {
strResult = result[matchKey || fields[0]];
}
if (isString(strResult)) {
var keyIndex = -1;
if (matchCase) {
keyIndex = strResult.indexOf(decodeURIComponent(query));
}
else {
keyIndex = strResult.toLowerCase().indexOf(decodeURIComponent(query).toLowerCase());
}
if (
(showAll) ||
(!matchContains && (keyIndex === 0)) ||
(matchContains && (keyIndex > -1)
)
) {
filteredResults.unshift(result);
}
}
}
response.results = filteredResults;
}
return response;
},
/**
* An overridable method for formatting the result of the query before it's displayed in the overlay.
*
* @method formatResult
* @param {Object} result The result data object
* @param {String} request The current query string
* @param {String} resultMatch The string from the results that matches the query
* @return {String}
*/
formatResult: function(result, request, resultMatch) {
return resultMatch || '';
},
/**
* An overridable method that creates an object to be passed to the sendRequest
* method of the data source object. Useful to overwrite if you wish to create
* a custom request object before it's sent.
*
* @method generateRequest
* @param {String} query The string currently being entered
* @return {Object}
*/
generateRequest: function(query) {
return {
request: query
};
},
/**
* Handles the response for the display of the results. This is a callback method
* that is fired by the sendRequest method so that results are ready to be accessed.
*
* @method handleResponse
* @param {EventFacade} event
*/
handleResponse: function(event) {
var instance = this;
instance._populateList(event);
var iconClass = ICON_DEFAULT;
if (event.error) {
iconClass = ICON_ERROR;
}
instance.button.set(ICON, iconClass);
},
/**
* Sends a query request to the data source object.
*
* @method sendQuery
* @param {String} query Query string
*/
sendQuery: function(query) {
var instance = this;
instance.set('focused', null);
var newQuery = query;
if (instance.get('delimChar')) {
query = instance.inputNode.get('value') + query;
}
instance._sendQuery(newQuery);
},
/**
* Clears the query interval
*
* @method _clearInterval
* @private
*/
_clearInterval: function() {
var instance = this;
if (instance._queryIntervalId) {
clearInterval(instance._queryIntervalId);
instance._queryIntervalId = null;
}
},
/**
* When <a href="Autocomplete.html#config_forceSelection">forceSelection</a> is true and
* the user tries to leave the input element without selecting an item from the results,
* the user selection is cleared.
*
* @method _clearSelection
* @protected
*/
_clearSelection: function() {
var instance = this;
var delimChar = instance.get('delimChar');
var extraction = {
previous: '',
query: instance.inputNode.get('value')
};
if (delimChar) {
extraction = instance._extractQuery(instance.inputNode.get('value'));
}
instance.fire('selectionEnforce', extraction.query);
},
/**
* Creates the data source object using the passed in <a href="Autocomplete.html#config_dataSource">dataSource</a>,
* and if it is a string, will use the <a href="Autocomplete.html#config_dataSourceType">dataSourceType</a> to
* create a new <a href="module_datasource.html">DataSource</a> object.
*
* @method _createDataSource
* @protected
* @return {String}
*/
_createDataSource: function() {
var instance = this;
instance._queryTask = new A.DelayedTask(instance.sendQuery, instance);
var dataSource = instance.get('dataSource');
var data = dataSource;
var dataSourceType = instance.get('dataSourceType');
if (!(dataSource instanceof A.DataSource.Local)) {
if (!dataSourceType) {
dataSourceType = 'Local';
if (isFunction(data)) {
dataSourceType = 'Function';
}
else if (isString(data)) {
dataSourceType = 'IO';
}
}
dataSource = new A.DataSource[dataSourceType](
{
source: data
}
);
}
dataSource.on('error', instance.handleResponse, instance);
dataSource.after('response', instance.handleResponse, instance);
dataSourceType = dataSource.name;
if (dataSourceType == 'dataSourceLocal') {
instance.set('applyLocalFilter', true);
}
instance.set('dataSource', dataSource);
instance.set('dataSource', dataSourceType);
instance.dataSource = dataSource;
var schema = instance.get('schema');
if (schema) {
if (schema.fn) {
instance.dataSource.plug(schema);
}
else {
var schemaType = instance.get('schemaType');
var schemaTypes = {
array: A.Plugin.DataSourceArraySchema,
json: A.Plugin.DataSourceJSONSchema,
text: A.Plugin.DataSourceTextSchema,
xml: A.Plugin.DataSourceXMLSchema
};
schemaType = schemaType.toLowerCase() || 'array';
instance.dataSource.plug(
{
fn: schemaTypes[schemaType],
cfg: {
schema: schema
}
}
);
}
}
instance.set('schema', schema);
},
/**
* Enables query interval detection for IME support.
*
* @method _enableIntervalDetection
* @protected
*/
_enableIntervalDetection: function() {
var instance = this;
var queryInterval = instance.get('queryInterval');
if (!instance._queryIntervalId && queryInterval) {
instance._queryInterval = setInterval(A.bind(instance._onInterval, instance), queryInterval);
}
},
/**
* Extracts the right most query from the delimited string in the input.
*
* @method _extractQuery
* @param {String} query String to parse
* @protected
* @return {String}
*/
_extractQuery: function(query) {
var instance = this;
var delimChar = instance.get('delimChar');
var delimIndex = -1;
var i = delimChar.length - 1;
var newIndex, queryStart, previous;
for (; i >= 0; i--) {
newIndex = query.lastIndexOf(delimChar[i]);
if (newIndex > delimIndex) {
delimIndex = newIndex;
}
}
if (delimChar[i] == ' ') {
for (var j = delimChar.length - 1; j >= 0; j--){
if (query[delimIndex - 1] == delimChar[j]) {
delimIndex--;
break;
}
}
}
if (delimIndex > -1) {
queryStart = delimIndex + 1;
while (query.charAt(queryStart) == ' ') {
queryStart += 1;
}
previous = query.substring(0, queryStart);
query = query.substring(queryStart);
}
else {
previous = '';
}
return {
previous: previous,
query: query
};
},
/**
* Focuses the input element.
*
* @method _focus
* @protected
*/
_focus: function() {
var instance = this;
setTimeout(
function() {
instance.inputNode.focus();
},
0
);
},
/**
* Whether or not the pressed key triggers some functionality or if it should
* be ignored.
*
* @method _isIgnoreKey
* @param {keyCode} Number The numeric code of the key pressed
* @protected
* @return {String}
*/
_isIgnoreKey: function(keyCode) {
var instance = this;
if (
(keyCode == KEY_TAB) ||
(keyCode == KEY_ENTER) ||
(keyCode == KEY_SHIFT) ||
(keyCode == KEY_CTRL) ||
(keyCode >= KEY_ALT && keyCode <= KEY_CAPS_LOCK) ||
(keyCode == KEY_ESC) ||
(keyCode >= KEY_PAGEUP && keyCode <= KEY_END) ||
(keyCode >= KEY_HOME && keyCode <= KEY_DOWN) ||
(keyCode >= KEY_PRINT_SCREEN && keyCode <= KEY_INSERT) ||
(keyCode == KEY_KOREAN_IME)
) {
return true;
}
return false;
},
/**
* If there is a currently selected item, the right arrow key will select
* that item and jump to the end of the input element, otherwise the container is closed.
*
* @method _jumpSelection
* @protected
*/
_jumpSelection: function() {
var instance = this;
if (instance._elCurListItem) {
instance._selectItem(instance._elCurListItem);
}
else {
instance._toggleContainer(false);
}
},
/**
* Triggered by the up and down arrow keys, changes the currently selected list element item, and scrolls the
* container if necessary.
*
* @method _moveSelection
* @param {Number} keyCode The numeric code of the key pressed
* @protected
*/
_moveSelection: function(keyCode) {
var instance = this;
if (instance.overlay.get('visible')) {
var elCurListItem = instance._elCurListItem;
var curItemIndex = -1;
if (elCurListItem) {
curItemIndex = Number(elCurListItem.getAttribute('data-listItemIndex'));
}
var newItemIndex = curItemIndex - 1;
if (keyCode == KEY_DOWN) {
newItemIndex = curItemIndex + 1;
}
if (newItemIndex == -1) {
newItemIndex = instance._displayedItems - 1;
}
if (newItemIndex >= instance._displayedItems) {
newItemIndex = 0;
}
if (newItemIndex < -2) {
return;
}
if (elCurListItem) {
instance._toggleHighlight(elCurListItem, 'from');
instance.fire('itemArrowFrom', elCurListItem);
}
if (newItemIndex == -1) {
if (instance.get('delimChar')) {
instance.inputNode.set('value', instance._pastSelections + instance._currentQuery);
}
else {
instance.inputNode.set('value', instance._currentQuery);
}
return;
}
if (newItemIndex == -2) {
instance._toggleContainer(false);
return;
}
var elNewListItem = instance.resultList.get('childNodes').item(newItemIndex);
var elContent = instance.overlay.get(CONTENT_BOX);
var contentOverflow = elContent.getStyle('overflow');
var contentOverflowY = elContent.getStyle('overflowY');
var scrollOn = (contentOverflow == 'auto') || (contentOverflow == 'scroll') || (contentOverflowY == 'auto') || (contentOverflowY == 'scroll');
if (scrollOn &&
(newItemIndex > -1) &&
(newItemIndex < instance._displayedItems)) {
var newScrollTop = -1;
var liTop = elNewListItem.get('offsetTop');
var liBottom = liTop + elNewListItem.get('offsetHeight');
var contentHeight = elContent.get('offsetHeight');
var contentScrollTop = elContent.get('scrollTop');
var contentBottom = contentHeight + contentScrollTop;
if (keyCode == KEY_DOWN) {
if (liBottom > contentBottom) {
newScrollTop = (liBottom - contentHeight);
}
else if (liBottom < contentScrollTop) {
newScrollTop = liTop;
}
}
else {
if (liTop < contentHeight) {
newScrollTop = liTop;
}
else if (liTop > contentBottom) {
newScrollTop = (liBottom - contentHeight);
}
}
if (newScrollTop > -1) {
elContent.set('scrollTop', newScrollTop);
}
}
instance._toggleHighlight(elNewListItem, 'to');
instance.fire('itemArrowTo', elNewListItem);
if (instance.get('typeAhead')) {
instance._updateValue(elNewListItem);
}
}
},
/**
* Called when the user mouses down on the button element in the combobox.
*
* @method _onButtonMouseDown
* @param {EventFacade} event
* @protected
*/
_onButtonMouseDown: function(event) {
var instance = this;
event.halt();
instance._focus();
instance._sendQuery(instance.inputNode.get('value') + '*');
},
/**
* Handles when a user clicks on the container.
*
* @method _onContainerClick
* @param {EventFacade} event
* @protected
*/
_onContainerClick: function(event) {
var instance = this;
var target = event.target;
var tagName = target.get('nodeName').toLowerCase();
event.halt();
while (target && (tagName != 'table')) {
switch (tagName) {
case 'body':
return;
case 'li':
instance._toggleHighlight(target, 'to');
instance._selectItem(target);
return;
default:
break;
}
target = target.get('parentNode');
if (target) {
tagName.get('nodeName').toLowerCase();
}
}
},
/**
* Handles when a user mouses out of the container.
*
* @method _onContainerMouseout
* @param {EventFacade} event
* @protected
*/
_onContainerMouseout: function(event) {
var instance = this;
var target = event.target;
var tagName = target.get('nodeName').toLowerCase();
while (target && (tagName != 'table')) {
switch (tagName) {
case 'body':
return;
case 'li':
instance._toggleHighlight(target, 'from');
instance.fire('itemMouseOut', target);
break;
case 'ul':
instance._toggleHighlight(instance._elCurListItem, 'to');
break;
case 'div':
if (target.hasClass(CSS_RESULTS_OVERLAY)) {
instance._overContainer = false;
return;
}
break;
default:
break;
}
target = target.get('parentNode');
if (target) {
tagName = target.get('nodeName').toLowerCase();
}
}
},
/**
* Handles when a user mouses over the container.
*
* @method _onContainerMouseover
* @param {EventFacade} event
* @protected
*/
_onContainerMouseover: function(event) {
var instance = this;
var target = event.target;
var tagName = target.get('nodeName').toLowerCase();
while (target && (tagName != 'table')) {
switch (tagName) {
case 'body':
return;
case 'li':
instance._toggleHighlight(target, 'to');
instance.fire('itemMouseOut', target);
break;
case 'div':
if (target.hasClass(CSS_RESULTS_OVERLAY)) {
instance._overContainer = true;
return;
}
break;
default:
break;
}
target = target.get('parentNode');
if (target) {
tagName = target.get('nodeName').toLowerCase();
}
}
},
/**
* Handles the container scroll events.
*
* @method _onContainerScroll
* @param {EventFacade} event
* @protected
*/
_onContainerScroll: function(event) {
var instance = this;
instance._focus();
},
/**
* Enables the query to be triggered based on detecting text input via intervals instead of via
* key events.
*
* @method _onInterval
* @protected
*/
_onInterval: function() {
var instance = this;
var curValue = instance.inputNode.get('value');
var lastValue = instance._lastValue;
if (curValue != lastValue) {
instance._lastValue = curValue;
instance._sendQuery(curValue);
}
},
/**
* Handles the input element losing focus.
*
* @method _onTextboxBlur
* @param {EventFacade} event
* @protected
*/
_onTextboxBlur: function(event) {
var instance = this;
if (!instance._overContainer || (instance._keyCode == KEY_TAB)) {
if (!instance._itemSelected) {
var elMatchListItem = instance._textMatchesOption();
var overlayVisible = instance.overlay.get('visible');
if (!overlayVisible || (overlayVisible && isNull(elMatchListItem))) {
if (instance.get('forceSelection')) {
instance._clearSelection();
}
else {
instance.fire('unmatchedItemSelect', instance._currentQuery);
}
}
else {
if (instance.get('forceSelection')) {
instance._selectItem(elMatchListItem);
}
}
}
instance._clearInterval();
instance.blur();
if (instance._initInputValue !== instance.inputNode.get('value')) {
instance.fire('textboxChange');
}
instance.fire('textboxBlur');
instance._toggleContainer(false);
}
else {
instance._focus();
}
},
/**
* Handles the input element gaining focus.
*
* @method _onTextboxFocus
* @param {EventFacade} event
* @protected
*/
_onTextboxFocus: function(event) {
var instance = this;
if (!instance.get('focused')) {
instance.inputNode.setAttribute('autocomplete', 'off');
instance.focus();
instance._initInputValue = instance.inputNode.get('value');
instance.fire('textboxFocus');
}
},
/**
* Handles the keydown events on the input element for functional keys.
*
* @method _onTextboxKeyDown
* @param {EventFacade} event
* @protected
*/
_onTextboxKeyDown: function(event) {
var instance = this;
var keyCode = event.keyCode;
if (instance._typeAheadDelayId != -1) {
clearTimeout(instance._typeAheadDelayId);
}
switch (keyCode) {
case KEY_TAB:
if (instance._elCurListItem) {
if (instance.get('delimChar') && instance._keyCode != keyCode) {
if (instance.overlay.get('visible')) {
event.halt();
}
}
instance._selectItem(instance._elCurListItem);
}
else {
instance._toggleContainer(false);
}
break;
case KEY_ENTER:
if (instance._elCurListItem) {
if (instance._keyCode != keyCode) {
if (instance.overlay.get('visible')) {
event.halt();
}
}
instance._selectItem(instance._elCurListItem);
}
else {
instance._toggleContainer(false);
}
break;
case KEY_ESC:
instance._toggleContainer(false);
return;
case KEY_UP:
if (instance.overlay.get('visible')) {
event.halt();
instance._moveSelection(keyCode);
}
break;
case KEY_RIGHT:
instance._jumpSelection();
break;
case KEY_DOWN:
if (instance.overlay.get('visible')) {
event.halt();
instance._moveSelection(keyCode);
}
break;
default:
instance._itemSelected = false;
instance._toggleHighlight(instance._elCurListItem, 'from');
instance.fire('textboxKey', keyCode);
break;
}
if (keyCode == KEY_ALT) {
instance._enableIntervalDetection();
}
instance._keyCode = keyCode;
},
/**
* Handles the key press events of the input element.
*
* @method _onTextboxKeyPress
* @param {EventFacade} event
* @protected
*/
_onTextboxKeyPress: function(event) {
var instance = this;
var keyCode = event.keyCode;
switch (keyCode) {
case KEY_TAB:
if (instance.overlay.get('visible')) {
if (instance.get('delimChar')) {
event.halt();
}
if (instance._elCurListItem) {
instance._selectItem(instance._elCurListItem);
}
else {
instance._toggleContainer(false);
}
}
break;
case 13:
if (instance.overlay.get('visible')) {
event.halt();
if (instance._elCurListItem) {
instance._selectItem(instance._elCurListItem);
}
else {
instance._toggleContainer(false);
}
}
break;
default:
break;
}
if (keyCode == KEY_KOREAN_IME) {
instance._enableIntervalDetection();
}
},
/**
* Handles the keyup events of the input element.
*
* @method _onTextboxKeyUp
* @param {EventFacade} event
* @protected
*/
_onTextboxKeyUp: function(event) {
var instance = this;
var input = instance.inputNode;
var value = input.get('value');
var keyCode = event.keyCode;
if (instance._isIgnoreKey(keyCode)) {
return;
}
instance._queryTask.delay(instance.get('queryDelay'), null, null, [value]);
},
/**
* Populates the container with list items of the query results.
*
* @method _populateList
* @param {EventFacade} event
* @protected
*/
_populateList: function(event) {
var instance = this;
if (instance._typeAheadDelayId != -1) {
clearTimeout(instance._typeAheadDelayId);
}
var query = event.request;
var response = event.response;
var callback = event.callback;
var showAll = (query == '*');
if (callback && callback.argument && callback.argument.query) {
event.request = query = callback.argument.query;
}
var ok = instance.doBeforeLoadData(event);
if (ok && !event.error) {
instance.fire('dataReturn', event);
var focused = instance.get('focused');
if (showAll || focused || focused === null) {
var currentQuery = decodeURIComponent(query);
instance._currentQuery = currentQuery;
instance._itemSelected = false;
var allResults = event.response.results;
var itemsToShow = Math.min(allResults.length, instance.get('maxResultsDisplayed'));
var fields = instance.get('schema.resultFields');
var matchKey = instance.get('matchKey');
if (!matchKey && fields) {
matchKey = fields[0];
}
else {
matchKey = matchKey || 0;
}
if (itemsToShow > 0) {
var allListItemEls = instance.resultList.get('childNodes');
allListItemEls.each(
function(node, i, nodeList) {
if (i < itemsToShow) {
var result = allResults[i];
var resultMatch = '';
if (isString(result)) {
resultMatch = result;
}
else if (isArray(result)) {
resultMatch = result[0];
}
else {
resultMatch = result[matchKey];
}
node._resultMatch = resultMatch;
node._resultData = result;
node.html(instance.formatResult(result, currentQuery, resultMatch));
node.removeClass(CSS_HIDDEN);
}
else {
node.addClass(CSS_HIDDEN);
}
}
);
instance._displayedItems = itemsToShow;
instance.fire('containerPopulate', query, allResults);
if (query != '*' && instance.get('autoHighlight')) {
var elFirstListItem = instance.resultList.get('firstChild');
instance._toggleHighlight(elFirstListItem, 'to');
instance.fire('itemArrowTo', elFirstListItem);
instance._typeAhead(elFirstListItem, query);
}
else {
instance._toggleHighlight(instance._elCurListItem, 'from');
}
ok = instance.doBeforeExpandContainer(query, allResults);
instance._toggleContainer(ok);
}
else {
instance._toggleContainer(false);
}
return;
}
}
else {
instance.fire('dataError', query);
}
},
/**
* Realigns the container to the input element.
*
* @method _realignContainer
* @param {EventFacade} event
* @protected
*/
_realignContainer: function(event) {
var instance = this;
var overlayAlign = instance._overlayAlign;
if (event.newVal) {
instance.overlay._uiSetAlign(overlayAlign.node, overlayAlign.points);
}
},
/**
* Handles the rendering of the input element.
*
* @method _renderInput
* @protected
*/
_renderInput: function() {
var instance = this;
var contentBox = instance.get(CONTENT_BOX);
var input = instance.get('input');
var comboConfig = {
field: {
labelText: false
},
icons: [
{
icon: 'circle-triangle-b',
id: 'trigger',
handler: {
fn: instance._onButtonMouseDown,
context: instance
}
}
]
};
var inputReference = null;
var inputParent = null;
if (input) {
input = A.one(input);
comboConfig.field.node = input;
inputReference = input.next();
inputParent = input.get('parentNode');
}
var comboBox = new A.Combobox(comboConfig).render(contentBox);
if (inputParent) {
var comboBoundingBox = comboBox.get('boundingBox');
inputParent.insertBefore(comboBoundingBox, inputReference);
}
instance.inputNode = comboBox.get('node');
instance.button = comboBox.icons.item('trigger');
instance.set('uniqueName', A.stamp(instance.inputNode));
},
/**
* Pre-populates the container with the
* <a href="Autocomplete.html#config_maxResultsDisplayed">maxResultsDisplayed</a>
* number of list items.
*
* @method _renderListElements
* @protected
*/
_renderListElements: function() {
var instance = this;
var maxResultsDisplayed = instance.get('maxResultsDisplayed');
var resultList = instance.resultList;
var listItems = [];
while (maxResultsDisplayed--) {
listItems[maxResultsDisplayed] = '<li class="' + CSS_HIDDEN + ' ' + CSS_LIST_ITEM + '" data-listItemIndex="' + maxResultsDisplayed + '"></li>';
}
resultList.html(listItems.join(''));
},
/**
* Handles the creation of the overlay where the result list will be displayed.
*
* @method _renderOverlay
* @protected
*/
_renderOverlay: function() {
var instance = this;
var overlayAlign = instance._overlayAlign;
overlayAlign.node = instance.inputNode;
var overlay = new A.OverlayBase(
{
align: overlayAlign,
bodyContent: '<ul></ul>',
visible: false,
width: instance.inputNode.get('offsetWidth')
}
);
var contentBox = overlay.get(CONTENT_BOX);
overlay.get(BOUNDING_BOX).addClass(CSS_RESULTS_OVERLAY);
contentBox.addClass(CSS_RESULTS_OVERLAY_CONTENT);
overlay.render(document.body);
overlay.addTarget(instance);
instance.overlay = overlay;
instance.resultList = contentBox.one('ul');
instance.resultList.addClass(CSS_RESULTS_LIST);
instance._renderListElements();
},
/**
* Selects a list item from the query results.
*
* @method _selectItem
* @param {Node} elListItem The list item to select
* @protected
*/
_selectItem: function(elListItem) {
var instance = this;
instance._itemSelected = true;
instance._updateValue(elListItem);
instance._pastSelections = instance.inputNode.get('value');
instance._clearInterval();
instance.fire('itemSelect', elListItem, elListItem._resultData);
instance._toggleContainer(false);
},
/**
* Makes a query request to the data source.
*
* @method _sendQuery
* @param {String} query The query string
* @protected
*/
_sendQuery: function(query) {
var instance = this;
if (instance.get('disabled')) {
instance._toggleContainer(false);
return;
}
var delimChar = instance.get('delimChar');
var minQueryLength = instance.get('minQueryLength');
if (delimChar) {
var extraction = instance._extractQuery(query);
query = extraction.query;
instance._pastSelections = extraction.previous;
}
if ((query && (query.length < minQueryLength)) || (!query && minQueryLength > 0)) {
instance._queryTask.cancel();
instance._toggleContainer(false);
return;
}
query = encodeURIComponent(query);
if (instance.get('applyLocalFilter')) {
instance.dataSource.on('response', instance.filterResults, instance);
}
var request = instance.generateRequest(query);
instance.fire('dataRequest', query, request);
instance.dataSource.sendRequest(request);
},
/**
* Checks to see if the value typed by the user matches any of the
* query results.
*
* @method _textMatchesOption
* @protected
*/
_textMatchesOption: function() {
var instance = this;
var elMatch = null;
var displayedItems = instance._displayedItems;
var listItems = instance.resultList.get('childNodes');
for (var i=0; i < displayedItems.length; i++) {
var elListItem = listItems.item(i);
var match = ('' + elListItem._resultMatch).toLowerCase();
if (match == instance._currentQuery.toLowerCase()) {
elMatch = elListItem;
break;
}
}
return elMatch;
},
/**
* Toggles the display of the results container.
*
* @method _toggleContainer
* @param {Boolean} show Flag to force the showing or hiding of the container
* @protected
*/
_toggleContainer: function(show) {
var instance = this;
var overlay = instance.overlay;
if (instance.get('alwaysShowContainer') && overlay.get('visible')) {
return;
}
if (!show) {
instance._toggleHighlight(instance._elCurListItem, 'from');
instance._displayedItems = 0;
instance._currentQuery = null;
}
if (show) {
overlay.show();
instance.fire('containerExpand');
}
else {
overlay.hide();
instance.fire('containerCollapse');
}
},
/**
* Toggles the highlighting of a list item, and removes the highlighting from the previous item
*
* @method _toggleHighlight
* @param {Node} elNewListItem The item to be highlighted
* @param {String} action Whether we are moving to or from an item. Valid values are "to" or "from".
* @protected
*/
_toggleHighlight: function(elNewListItem, action) {
var instance = this;
if (elNewListItem) {
if (instance._elCurListItem) {
instance._elCurListItem.removeClass(CSS_HIGLIGHT);
instance._elCurListItem = null;
}
if (action == 'to') {
elNewListItem.addClass(CSS_HIGLIGHT);
instance._elCurListItem = elNewListItem;
}
}
},
/**
* Updates in the input element with the first result as the user types,
* selecting the text the user has not typed yet.
*
* @method _typeAhead
* @param {Node} elListItem The selected list item
* @param {String} query The query string
* @protected
*/
_typeAhead: function(elListItem, query) {
var instance = this;
if (!instance.get('typeAhead') || instance._keyCode == KEY_BACKSPACE) {
return;
}
var inputEl = A.Node.getDOMNode(instance.inputNode);
if (inputEl.setSelectionRange || inputEl.createTextRange) {
instance._typeAheadDelayId = setTimeout(
function() {
var value = inputEl.value;
var start = value.length;
instance._updateValue(elListItem);
var end = inputEl.value.length;
instance.inputNode.selectText(start, end);
var prefill = inputEl.value.substr(start, end);
instance.fire('typeAhead', query, prefill);
},
instance.get('typeAheadDelay')
);
}
},
/**
* Updates the input element with the selected query result. If
* <a href="Autocomplete.html#config_delimChar">delimChar</a> has been set,
* then the value gets appended with the delimiter.
*
* @method _updateValue
* @param {Node} elListItem The selected list item
* @protected
*/
_updateValue: function(elListItem) {
var instance = this;
if (!instance.get('suppressInputUpdate')) {
var input = instance.inputNode;
var resultMatch = elListItem._resultMatch;
var delimChar = instance.get('delimChar');
delimChar = (delimChar && delimChar[0]) || delimChar;
var newValue = '';
if (delimChar) {
newValue = instance._pastSelections;
newValue += resultMatch + delimChar;
if (delimChar != ' ') {
newValue += ' ';
}
}
else {
newValue = resultMatch;
}
input.set('value', newValue);
if (input.get('type') == 'textarea') {
input.set('scrollTop', input.get('scrollHeight'));
}
var end = newValue.length;
input.selectText(end, end);
instance._elCurListItem = elListItem;
}
},
_currentQuery: null,
_displayedItems: 0,
_elCurListItem: null,
_initInputValue: null,
_itemSelected: false,
_keyCode: null,
_lastValue: null,
_overContainer: false,
_pastSelections: '',
_typeAheadDelayId: -1
}
}
);
A.AutoComplete = AutoComplete;
}, '1.0.1' ,{skinnable:true, requires:['aui-base','aui-overlay-base','datasource','dataschema','aui-form-combobox']});
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
