2
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.com/yui/license.html
8
YUI.add('autocomplete-base', function(Y) {
11
* Provides automatic input completion or suggestions for text input fields and
14
* @module autocomplete
19
* <code>Y.Base</code> extension that provides core autocomplete logic (but no
20
* UI implementation) for a text input field or textarea. Must be mixed into a
21
* <code>Y.Base</code>-derived class to be useful.
23
* @module autocomplete
24
* @submodule autocomplete-base
29
* Extension that provides core autocomplete logic (but no UI implementation)
30
* for a text input field or textarea.
34
* The <code>AutoCompleteBase</code> class provides events and attributes that
35
* abstract away core autocomplete logic and configuration, but does not provide
36
* a widget implementation or suggestion UI. For a prepackaged autocomplete
37
* widget, see <code>AutoCompleteList</code>.
41
* This extension cannot be instantiated directly, since it doesn't provide an
42
* actual implementation. It's intended to be mixed into a
43
* <code>Y.Base</code>-based class or widget.
47
* <code>Y.Widget</code>-based example:
51
* YUI().use('autocomplete-base', 'widget', function (Y) {
52
* var MyAC = Y.Base.create('myAC', Y.Widget, [Y.AutoCompleteBase], {
53
* // Custom prototype methods and properties.
55
* // Custom static methods and properties.
58
* // Custom implementation code.
63
* <code>Y.Base</code>-based example:
67
* YUI().use('autocomplete-base', function (Y) {
68
* var MyAC = Y.Base.create('myAC', Y.Base, [Y.AutoCompleteBase], {
69
* initializer: function () {
70
* this._bindUIACBase();
71
* this._syncUIACBase();
72
* },
74
* // Custom prototype methods and properties.
76
* // Custom static methods and properties.
79
* // Custom implementation code.
83
* @class AutoCompleteBase
86
var Escape = Y.Escape,
91
isFunction = Lang.isFunction,
92
isString = Lang.isString,
95
INVALID_VALUE = Y.Attribute.INVALID_VALUE,
97
_FUNCTION_VALIDATOR = '_functionValidator',
98
_SOURCE_SUCCESS = '_sourceSuccess',
100
ALLOW_BROWSER_AC = 'allowBrowserAutocomplete',
101
INPUT_NODE = 'inputNode',
103
QUERY_DELIMITER = 'queryDelimiter',
104
REQUEST_TEMPLATE = 'requestTemplate',
106
RESULT_LIST_LOCATOR = 'resultListLocator',
108
VALUE_CHANGE = 'valueChange',
112
EVT_RESULTS = RESULTS;
114
function AutoCompleteBase() {
116
Y.before(this._bindUIACBase, this, 'bindUI');
117
Y.before(this._destructorACBase, this, 'destructor');
118
Y.before(this._syncUIACBase, this, 'syncUI');
120
// -- Public Events --------------------------------------------------------
123
* Fires after the query has been completely cleared or no longer meets the
124
* minimum query length requirement.
127
* @param {EventFacade} e Event facade with the following additional
131
* <dt>prevVal (String)</dt>
133
* Value of the query before it was cleared.
137
* @preventable _defClearFn
139
this.publish(EVT_CLEAR, {
140
defaultFn: this._defClearFn
144
* Fires when the contents of the input field have changed and the input
145
* value meets the criteria necessary to generate an autocomplete query.
148
* @param {EventFacade} e Event facade with the following additional
152
* <dt>inputValue (String)</dt>
154
* Full contents of the text input field or textarea that generated
158
* <dt>query (String)</dt>
160
* Autocomplete query. This is the string that will be used to
161
* request completion results. It may or may not be the same as
162
* <code>inputValue</code>.
166
* @preventable _defQueryFn
168
this.publish(EVT_QUERY, {
169
defaultFn: this._defQueryFn
173
* Fires after query results are received from the <code>source</code>. If
174
* no source has been set, this event will not fire.
177
* @param {EventFacade} e Event facade with the following additional
181
* <dt>data (Array|Object)</dt>
183
* Raw, unfiltered result data (if available).
186
* <dt>query (String)</dt>
188
* Query that generated these results.
191
* <dt>results (Array)</dt>
193
* Array of filtered, formatted, and highlighted results. Each item in
194
* the array is an object with the following properties:
197
* <dt>display (Node|HTMLElement|String)</dt>
199
* Formatted result HTML suitable for display to the user. If no
200
* custom formatter is set, this will be an HTML-escaped version of
201
* the string in the <code>text</code> property.
204
* <dt>highlighted (String)</dt>
206
* Highlighted (but not formatted) result text. This property will
207
* only be set if a highlighter is in use.
210
* <dt>raw (mixed)</dt>
212
* Raw, unformatted result in whatever form it was provided by the
213
* <code>source</code>.
216
* <dt>text (String)</dt>
218
* Plain text version of the result, suitable for being inserted
219
* into the value of a text input field or textarea when the result
220
* is selected by a user. This value is not HTML-escaped and should
221
* not be inserted into the page using innerHTML.
227
* @preventable _defResultsFn
229
this.publish(EVT_RESULTS, {
230
defaultFn: this._defResultsFn
234
// -- Public Static Properties -------------------------------------------------
235
AutoCompleteBase.ATTRS = {
237
* Whether or not to enable the browser's built-in autocomplete
238
* functionality for input fields.
240
* @attribute allowBrowserAutocomplete
244
allowBrowserAutocomplete: {
249
* When a <code>queryDelimiter</code> is set, trailing delimiters will
250
* automatically be stripped from the input value by default when the
251
* input node loses focus. Set this to <code>true</code> to allow trailing
254
* @attribute allowTrailingDelimiter
258
allowTrailingDelimiter: {
263
* Node to monitor for changes, which will generate <code>query</code>
264
* events when appropriate. May be either an input field or a textarea.
266
* @attribute inputNode
267
* @type Node|HTMLElement|String
272
writeOnce: 'initOnly'
276
* Maximum number of results to return. A value of <code>0</code> or less
277
* will allow an unlimited number of results.
279
* @attribute maxResults
288
* Minimum number of characters that must be entered before a
289
* <code>query</code> event will be fired. A value of <code>0</code>
290
* allows empty queries; a negative value will effectively disable all
291
* <code>query</code> events.
293
* @attribute minQueryLength
303
* Current query, or <code>null</code> if there is no current query.
307
* The query might not be the same as the current value of the input
308
* node, both for timing reasons (due to <code>queryDelay</code>) and
309
* because when one or more <code>queryDelimiter</code> separators are
310
* in use, only the last portion of the delimited input string will be
311
* used as the query value.
326
* Number of milliseconds to delay after input before triggering a
327
* <code>query</code> event. If new input occurs before this delay is
328
* over, the previous input event will be ignored and a new delay will
333
* This can be useful both to throttle queries to a remote data source
334
* and to avoid distracting the user by showing them less relevant
335
* results before they've paused their typing.
338
* @attribute queryDelay
347
* Query delimiter string. When a delimiter is configured, the input value
348
* will be split on the delimiter, and only the last portion will be used in
349
* autocomplete queries and updated when the <code>query</code> attribute is
352
* @attribute queryDelimiter
362
* Source request template. This can be a function that accepts a query as a
363
* parameter and returns a request string, or it can be a string containing
364
* the placeholder "{query}", which will be replaced with the actual
365
* URI-encoded query. In either case, the resulting string will be appended
366
* to the request URL when the <code>source</code> attribute is set to a
367
* remote DataSource, JSONP URL, or XHR URL (it will not be appended to YQL
372
* While <code>requestTemplate</code> may be set to either a function or
373
* a string, it will always be returned as a function that accepts a
374
* query argument and returns a string.
377
* @attribute requestTemplate
378
* @type Function|String|null
382
setter: '_setRequestTemplate',
388
* Array of local result filter functions. If provided, each filter
389
* will be called with two arguments when results are received: the query
390
* and an array of result objects. See the documentation for the
391
* <code>results</code> event for a list of the properties available on each
396
* Each filter is expected to return a filtered or modified version of the
397
* results array, which will then be passed on to subsequent filters, then
398
* the <code>resultHighlighter</code> function (if set), then the
399
* <code>resultFormatter</code> function (if set), and finally to
400
* subscribers to the <code>results</code> event.
404
* If no <code>source</code> is set, result filters will not be called.
408
* Prepackaged result filters provided by the autocomplete-filters and
409
* autocomplete-filters-accentfold modules can be used by specifying the
410
* filter name as a string, such as <code>'phraseMatch'</code> (assuming
411
* the necessary filters module is loaded).
414
* @attribute resultFilters
419
setter: '_setResultFilters',
425
* Function which will be used to format results. If provided, this function
426
* will be called with two arguments after results have been received and
427
* filtered: the query and an array of result objects. The formatter is
428
* expected to return an array of HTML strings or Node instances containing
429
* the desired HTML for each result.
433
* See the documentation for the <code>results</code> event for a list of
434
* the properties available on each result object.
438
* If no <code>source</code> is set, the formatter will not be called.
441
* @attribute resultFormatter
442
* @type Function|null
445
validator: _FUNCTION_VALIDATOR
450
* Function which will be used to highlight results. If provided, this
451
* function will be called with two arguments after results have been
452
* received and filtered: the query and an array of filtered result objects.
453
* The highlighter is expected to return an array of highlighted result
454
* text in the form of HTML strings.
458
* See the documentation for the <code>results</code> event for a list of
459
* the properties available on each result object.
463
* If no <code>source</code> is set, the highlighter will not be called.
466
* @attribute resultHighlighter
467
* @type Function|null
470
setter: '_setResultHighlighter'
475
* Locator that should be used to extract an array of results from a
476
* non-array response.
480
* By default, no locator is applied, and all responses are assumed to be
481
* arrays by default. If all responses are already arrays, you don't need to
486
* The locator may be either a function (which will receive the raw response
487
* as an argument and must return an array) or a string representing an
488
* object path, such as "foo.bar.baz" (which would return the value of
489
* <code>result.foo.bar.baz</code> if the response is an object).
493
* While <code>resultListLocator</code> may be set to either a function or a
494
* string, it will always be returned as a function that accepts a response
495
* argument and returns an array.
498
* @attribute resultListLocator
499
* @type Function|String|null
502
setter: '_setLocator'
506
* Current results, or an empty array if there are no results.
520
* Locator that should be used to extract a plain text string from a
521
* non-string result item. The resulting text value will typically be the
522
* value that ends up being inserted into an input field or textarea when
523
* the user of an autocomplete implementation selects a result.
527
* By default, no locator is applied, and all results are assumed to be
528
* plain text strings. If all results are already plain text strings, you
529
* don't need to define a locator.
533
* The locator may be either a function (which will receive the raw result
534
* as an argument and must return a string) or a string representing an
535
* object path, such as "foo.bar.baz" (which would return the value of
536
* <code>result.foo.bar.baz</code> if the result is an object).
540
* While <code>resultTextLocator</code> may be set to either a function or a
541
* string, it will always be returned as a function that accepts a result
542
* argument and returns a string.
545
* @attribute resultTextLocator
546
* @type Function|String|null
549
setter: '_setLocator'
554
* Source for autocomplete results. The following source types are
562
* <i>Example:</i> <code>['first result', 'second result', 'etc']</code>
566
* The full array will be provided to any configured filters for each
567
* query. This is an easy way to create a fully client-side autocomplete
572
* <dt>DataSource</dt>
575
* A <code>DataSource</code> instance or other object that provides a
576
* DataSource-like <code>sendRequest</code> method. See the
577
* <code>DataSource</code> documentation for details.
584
* <i>Example:</i> <code>function (query) { return ['foo', 'bar']; }</code>
588
* A function source will be called with the current query as a
589
* parameter, and should return an array of results.
596
* <i>Example:</i> <code>{foo: ['foo result 1', 'foo result 2'], bar: ['bar result']}</code>
600
* An object will be treated as a query hashmap. If a property on the
601
* object matches the current query, the value of that property will be
602
* used as the response.
606
* The response is assumed to be an array of results by default. If the
607
* response is not an array, provide a <code>resultListLocator</code> to
608
* process the response and return an array.
614
* If the optional <code>autocomplete-sources</code> module is loaded, then
615
* the following additional source types will be supported as well:
619
* <dt>String (JSONP URL)</dt>
622
* <i>Example:</i> <code>'http://example.com/search?q={query}&callback={callback}'</code>
626
* If a URL with a <code>{callback}</code> placeholder is provided, it
627
* will be used to make a JSONP request. The <code>{query}</code>
628
* placeholder will be replaced with the current query, and the
629
* <code>{callback}</code> placeholder will be replaced with an
630
* internally-generated JSONP callback name. Both placeholders must
631
* appear in the URL, or the request will fail. An optional
632
* <code>{maxResults}</code> placeholder may also be provided, and will
633
* be replaced with the value of the maxResults attribute (or 1000 if
634
* the maxResults attribute is 0 or less).
638
* The response is assumed to be an array of results by default. If the
639
* response is not an array, provide a <code>resultListLocator</code> to
640
* process the response and return an array.
644
* <strong>The <code>jsonp</code> module must be loaded in order for
645
* JSONP URL sources to work.</strong> If the <code>jsonp</code> module
646
* is not already loaded, it will be loaded on demand if possible.
650
* <dt>String (XHR URL)</dt>
653
* <i>Example:</i> <code>'http://example.com/search?q={query}'</code>
657
* If a URL without a <code>{callback}</code> placeholder is provided,
658
* it will be used to make a same-origin XHR request. The
659
* <code>{query}</code> placeholder will be replaced with the current
660
* query. An optional <code>{maxResults}</code> placeholder may also be
661
* provided, and will be replaced with the value of the maxResults
662
* attribute (or 1000 if the maxResults attribute is 0 or less).
666
* The response is assumed to be a JSON array of results by default. If
667
* the response is a JSON object and not an array, provide a
668
* <code>resultListLocator</code> to process the response and return an
669
* array. If the response is in some form other than JSON, you will
670
* need to use a custom DataSource instance as the source.
674
* <strong>The <code>io-base</code> and <code>json-parse</code> modules
675
* must be loaded in order for XHR URL sources to work.</strong> If
676
* these modules are not already loaded, they will be loaded on demand
681
* <dt>String (YQL query)</dt>
684
* <i>Example:</i> <code>'select * from search.suggest where query="{query}"'</code>
688
* If a YQL query is provided, it will be used to make a YQL request.
689
* The <code>{query}</code> placeholder will be replaced with the
690
* current autocomplete query. This placeholder must appear in the YQL
691
* query, or the request will fail. An optional
692
* <code>{maxResults}</code> placeholder may also be provided, and will
693
* be replaced with the value of the maxResults attribute (or 1000 if
694
* the maxResults attribute is 0 or less).
698
* <strong>The <code>yql</code> module must be loaded in order for YQL
699
* sources to work.</strong> If the <code>yql</code> module is not
700
* already loaded, it will be loaded on demand if possible.
706
* As an alternative to providing a source, you could simply listen for
707
* <code>query</code> events and handle them any way you see fit. Providing
708
* a source is optional, but will usually be simpler.
712
* @type Array|DataSource|Function|Object|String|null
719
* If the <code>inputNode</code> specified at instantiation time has a
720
* <code>node-tokeninput</code> plugin attached to it, this attribute will
721
* be a reference to the <code>Y.Plugin.TokenInput</code> instance.
723
* @attribute tokenInput
724
* @type Plugin.TokenInput
732
* Current value of the input node.
739
// Why duplicate this._inputNode.get('value')? Because we need a
740
// reliable way to track the source of value changes. We want to perform
741
// completion when the user changes the value, but not when we change
747
AutoCompleteBase.CSS_PREFIX = 'ac';
748
AutoCompleteBase.UI_SRC = (Y.Widget && Y.Widget.UI_SRC) || 'ui';
750
AutoCompleteBase.prototype = {
751
// -- Public Prototype Methods ---------------------------------------------
755
* Sends a request to the configured source. If no source is configured,
756
* this method won't do anything.
760
* Usually there's no reason to call this method manually; it will be
761
* called automatically when user input causes a <code>query</code> event to
762
* be fired. The only time you'll need to call this method manually is if
763
* you want to force a request to be sent when no user input has occurred.
766
* @method sendRequest
767
* @param {String} query (optional) Query to send. If specified, the
768
* <code>query</code> attribute will be set to this query. If not
769
* specified, the current value of the <code>query</code> attribute will
771
* @param {Function} requestTemplate (optional) Request template function.
772
* If not specified, the current value of the <code>requestTemplate</code>
773
* attribute will be used.
776
sendRequest: function (query, requestTemplate) {
778
source = this.get('source');
780
if (query || query === '') {
781
this._set(QUERY, query);
783
query = this.get(QUERY);
787
if (!requestTemplate) {
788
requestTemplate = this.get(REQUEST_TEMPLATE);
791
request = requestTemplate ? requestTemplate(query) : query;
793
Y.log('sendRequest: ' + request, 'info', 'autocomplete-base');
798
success: Y.bind(this._onResponse, this, query)
806
// -- Protected Lifecycle Methods ------------------------------------------
809
* Attaches event listeners and behaviors.
811
* @method _bindUIACBase
814
_bindUIACBase: function () {
815
var inputNode = this.get(INPUT_NODE),
816
tokenInput = inputNode && inputNode.tokenInput;
818
// If the inputNode has a node-tokeninput plugin attached, bind to the
819
// plugin's inputNode instead.
821
inputNode = tokenInput.get(INPUT_NODE);
822
this._set('tokenInput', tokenInput);
826
Y.error('No inputNode specified.');
830
this._inputNode = inputNode;
832
this._acBaseEvents = [
833
// This is the valueChange event on the inputNode, provided by the
834
// event-valuechange module, not our own valueChange.
835
inputNode.on(VALUE_CHANGE, this._onInputValueChange, this),
837
inputNode.on('blur', this._onInputBlur, this),
839
this.after(ALLOW_BROWSER_AC + 'Change', this._syncBrowserAutocomplete),
840
this.after(VALUE_CHANGE, this._afterValueChange)
845
* Detaches AutoCompleteBase event listeners.
847
* @method _destructorACBase
850
_destructorACBase: function () {
851
var events = this._acBaseEvents;
853
while (events && events.length) {
854
events.pop().detach();
859
* Synchronizes the UI state of the <code>inputNode</code>.
861
* @method _syncUIACBase
864
_syncUIACBase: function () {
865
this._syncBrowserAutocomplete();
866
this.set(VALUE, this.get(INPUT_NODE).get(VALUE));
869
// -- Protected Prototype Methods ------------------------------------------
872
* Creates a DataSource-like object that simply returns the specified array
873
* as a response. See the <code>source</code> attribute for more details.
875
* @method _createArraySource
876
* @param {Array} source
877
* @return {Object} DataSource-like object.
880
_createArraySource: function (source) {
883
return {sendRequest: function (request) {
884
that[_SOURCE_SUCCESS](source.concat(), request);
889
* Creates a DataSource-like object that passes the query to a
890
* custom-defined function, which is expected to return an array as a
891
* response. See the <code>source</code> attribute for more details.
893
* @method _createFunctionSource
894
* @param {Function} source Function that accepts a query parameter and
895
* returns an array of results.
896
* @return {Object} DataSource-like object.
899
_createFunctionSource: function (source) {
902
return {sendRequest: function (request) {
903
that[_SOURCE_SUCCESS](source(request.request) || [], request);
908
* Creates a DataSource-like object that looks up queries as properties on
909
* the specified object, and returns the found value (if any) as a response.
910
* See the <code>source</code> attribute for more details.
912
* @method _createObjectSource
913
* @param {Object} source
914
* @return {Object} DataSource-like object.
917
_createObjectSource: function (source) {
920
return {sendRequest: function (request) {
921
var query = request.request;
923
that[_SOURCE_SUCCESS](
924
YObject.owns(source, query) ? source[query] : [],
931
* Returns <code>true</code> if <i>value</i> is either a function or
934
* @method _functionValidator
935
* @param {Function|null} value Value to validate.
938
_functionValidator: function (value) {
939
return value === null || isFunction(value);
943
* Faster and safer alternative to Y.Object.getValue(). Doesn't bother
944
* casting the path to an array (since we already know it's an array) and
945
* doesn't throw an error if a value in the middle of the object hierarchy
946
* is neither <code>undefined</code> nor an object.
948
* @method _getObjectValue
949
* @param {Object} obj
950
* @param {Array} path
951
* @return {mixed} Located value, or <code>undefined</code> if the value was
952
* not found at the specified path.
955
_getObjectValue: function (obj, path) {
960
for (var i = 0, len = path.length; obj && i < len; i++) {
968
* Parses result responses, performs filtering and highlighting, and fires
969
* the <code>results</code> event.
971
* @method _parseResponse
972
* @param {String} query Query that generated these results.
973
* @param {Object} response Response containing results.
974
* @param {Object} data Raw response data.
977
_parseResponse: function (query, response, data) {
984
listLocator = this.get(RESULT_LIST_LOCATOR),
986
unfiltered = response && response.results,
1000
if (unfiltered && listLocator) {
1001
unfiltered = listLocator(unfiltered);
1004
if (unfiltered && unfiltered.length) {
1005
filters = this.get('resultFilters');
1006
textLocator = this.get('resultTextLocator');
1008
// Create a lightweight result object for each result to make them
1009
// easier to work with. The various properties on the object
1010
// represent different formats of the result, and will be populated
1012
for (i = 0, len = unfiltered.length; i < len; ++i) {
1013
result = unfiltered[i];
1014
text = textLocator ? textLocator(result) : result.toString();
1017
display: Escape.html(text),
1023
// Run the results through all configured result filters. Each
1024
// filter returns an array of (potentially fewer) result objects,
1025
// which is then passed to the next filter, and so on.
1026
for (i = 0, len = filters.length; i < len; ++i) {
1027
results = filters[i](query, results.concat());
1030
Y.log("Filter didn't return anything.", 'warn', 'autocomplete-base');
1034
if (!results.length) {
1039
if (results.length) {
1040
formatter = this.get('resultFormatter');
1041
highlighter = this.get('resultHighlighter');
1042
maxResults = this.get('maxResults');
1044
// If maxResults is set and greater than 0, limit the number of
1046
if (maxResults && maxResults > 0 &&
1047
results.length > maxResults) {
1048
results.length = maxResults;
1051
// Run the results through the configured highlighter (if any).
1052
// The highlighter returns an array of highlighted strings (not
1053
// an array of result objects), and these strings are then added
1054
// to each result object.
1056
highlighted = highlighter(query, results.concat());
1059
Y.log("Highlighter didn't return anything.", 'warn', 'autocomplete-base');
1063
for (i = 0, len = highlighted.length; i < len; ++i) {
1064
result = results[i];
1065
result.highlighted = highlighted[i];
1066
result.display = result.highlighted;
1070
// Run the results through the configured formatter (if any) to
1071
// produce the final formatted results. The formatter returns an
1072
// array of strings or Node instances (not an array of result
1073
// objects), and these strings/Nodes are then added to each
1076
formatted = formatter(query, results.concat());
1079
Y.log("Formatter didn't return anything.", 'warn', 'autocomplete-base');
1083
for (i = 0, len = formatted.length; i < len; ++i) {
1084
results[i].display = formatted[i];
1090
facade.results = results;
1091
this.fire(EVT_RESULTS, facade);
1096
* Returns the query portion of the specified input value, or
1097
* <code>null</code> if there is no suitable query within the input value.
1101
* If a query delimiter is defined, the query will be the last delimited
1102
* part of of the string.
1105
* @method _parseValue
1106
* @param {String} value Input value from which to extract the query.
1107
* @return {String|null} query
1110
_parseValue: function (value) {
1111
var delim = this.get(QUERY_DELIMITER);
1114
value = value.split(delim);
1115
value = value[value.length - 1];
1118
return Lang.trimLeft(value);
1122
* Setter for locator attributes.
1124
* @method _setLocator
1125
* @param {Function|String|null} locator
1126
* @return {Function|null}
1129
_setLocator: function (locator) {
1130
if (this[_FUNCTION_VALIDATOR](locator)) {
1136
locator = locator.toString().split('.');
1138
return function (result) {
1139
return result && that._getObjectValue(result, locator);
1144
* Setter for the <code>requestTemplate</code> attribute.
1146
* @method _setRequestTemplate
1147
* @param {Function|String|null} template
1148
* @return {Function|null}
1151
_setRequestTemplate: function (template) {
1152
if (this[_FUNCTION_VALIDATOR](template)) {
1156
template = template.toString();
1158
return function (query) {
1159
return Lang.sub(template, {query: encodeURIComponent(query)});
1164
* Setter for the <code>resultFilters</code> attribute.
1166
* @method _setResultFilters
1167
* @param {Array|Function|String|null} filters <code>null</code>, a filter
1168
* function, an array of filter functions, or a string or array of strings
1169
* representing the names of methods on
1170
* <code>Y.AutoCompleteFilters</code>.
1171
* @return {Array} Array of filter functions (empty if <i>filters</i> is
1172
* <code>null</code>).
1175
_setResultFilters: function (filters) {
1176
var acFilters, getFilterFunction;
1178
if (filters === null) {
1182
acFilters = Y.AutoCompleteFilters;
1184
getFilterFunction = function (filter) {
1185
if (isFunction(filter)) {
1189
if (isString(filter) && acFilters &&
1190
isFunction(acFilters[filter])) {
1191
return acFilters[filter];
1197
if (Lang.isArray(filters)) {
1198
filters = YArray.map(filters, getFilterFunction);
1199
return YArray.every(filters, function (f) { return !!f; }) ?
1200
filters : INVALID_VALUE;
1202
filters = getFilterFunction(filters);
1203
return filters ? [filters] : INVALID_VALUE;
1208
* Setter for the <code>resultHighlighter</code> attribute.
1210
* @method _setResultHighlighter
1211
* @param {Function|String|null} highlighter <code>null</code>, a
1212
* highlighter function, or a string representing the name of a method on
1213
* <code>Y.AutoCompleteHighlighters</code>.
1214
* @return {Function|null}
1217
_setResultHighlighter: function (highlighter) {
1220
if (this._functionValidator(highlighter)) {
1224
acHighlighters = Y.AutoCompleteHighlighters;
1226
if (isString(highlighter) && acHighlighters &&
1227
isFunction(acHighlighters[highlighter])) {
1228
return acHighlighters[highlighter];
1231
return INVALID_VALUE;
1235
* Setter for the <code>source</code> attribute. Returns a DataSource or
1236
* a DataSource-like object depending on the type of <i>source</i>.
1238
* @method _setSource
1239
* @param {Array|DataSource|Object|String} source AutoComplete source. See
1240
* the <code>source</code> attribute for details.
1241
* @return {DataSource|Object}
1244
_setSource: function (source) {
1245
var sourcesNotLoaded = 'autocomplete-sources module not loaded';
1247
if ((source && isFunction(source.sendRequest)) || source === null) {
1248
// Quacks like a DataSource instance (or null). Make it so!
1252
switch (Lang.type(source)) {
1254
if (this._createStringSource) {
1255
return this._createStringSource(source);
1258
Y.error(sourcesNotLoaded);
1259
return INVALID_VALUE;
1262
// Wrap the array in a teensy tiny fake DataSource that just returns
1263
// the array itself for each request. Filters will do the rest.
1264
return this._createArraySource(source);
1267
return this._createFunctionSource(source);
1270
// If the object is a JSONPRequest instance, use it as a JSONP
1272
if (Y.JSONPRequest && source instanceof Y.JSONPRequest) {
1273
if (this._createJSONPSource) {
1274
return this._createJSONPSource(source);
1277
Y.error(sourcesNotLoaded);
1278
return INVALID_VALUE;
1281
// Not a JSONPRequest instance. Wrap the object in a teensy tiny
1282
// fake DataSource that looks for the request as a property on the
1283
// object and returns it if it exists, or an empty array otherwise.
1284
return this._createObjectSource(source);
1287
return INVALID_VALUE;
1291
* Shared success callback for non-DataSource sources.
1293
* @method _sourceSuccess
1294
* @param {mixed} data Response data.
1295
* @param {Object} request Request object.
1298
_sourceSuccess: function (data, request) {
1299
request.callback.success({
1301
response: {results: data}
1306
* Synchronizes the UI state of the <code>allowBrowserAutocomplete</code>
1309
* @method _syncBrowserAutocomplete
1312
_syncBrowserAutocomplete: function () {
1313
var inputNode = this.get(INPUT_NODE);
1315
if (inputNode.get('nodeName').toLowerCase() === 'input') {
1316
inputNode.setAttribute('autocomplete',
1317
this.get(ALLOW_BROWSER_AC) ? 'on' : 'off');
1323
* Updates the query portion of the <code>value</code> attribute.
1327
* If a query delimiter is defined, the last delimited portion of the input
1328
* value will be replaced with the specified <i>value</i>.
1331
* @method _updateValue
1332
* @param {String} newVal New value.
1335
_updateValue: function (newVal) {
1336
var delim = this.get(QUERY_DELIMITER),
1341
newVal = Lang.trimLeft(newVal);
1344
insertDelim = trim(delim); // so we don't double up on spaces
1345
prevVal = YArray.map(trim(this.get(VALUE)).split(delim), trim);
1346
len = prevVal.length;
1349
prevVal[len - 1] = newVal;
1350
newVal = prevVal.join(insertDelim + ' ');
1353
newVal = newVal + insertDelim + ' ';
1356
this.set(VALUE, newVal);
1359
// -- Protected Event Handlers ---------------------------------------------
1362
* Handles change events for the <code>value</code> attribute.
1364
* @method _afterValueChange
1365
* @param {EventFacade} e
1368
_afterValueChange: function (e) {
1376
// Don't query on value changes that didn't come from the user.
1377
if (e.src !== AutoCompleteBase.UI_SRC) {
1378
this._inputNode.set(VALUE, newVal);
1382
Y.log('valueChange: new: "' + newVal + '"; old: "' + e.prevVal + '"', 'info', 'autocomplete-base');
1384
minQueryLength = this.get('minQueryLength');
1385
query = this._parseValue(newVal) || '';
1387
if (minQueryLength >= 0 && query.length >= minQueryLength) {
1388
delay = this.get('queryDelay');
1391
fire = function () {
1392
that.fire(EVT_QUERY, {
1399
clearTimeout(this._delay);
1400
this._delay = setTimeout(fire, delay);
1405
clearTimeout(this._delay);
1407
this.fire(EVT_CLEAR, {
1408
prevVal: e.prevVal ? this._parseValue(e.prevVal) : null
1414
* Handles <code>blur</code> events on the input node.
1416
* @method _onInputBlur
1417
* @param {EventFacade} e
1420
_onInputBlur: function (e) {
1421
var delim = this.get(QUERY_DELIMITER),
1426
// If a query delimiter is set and the input's value contains one or
1427
// more trailing delimiters, strip them.
1428
if (delim && !this.get('allowTrailingDelimiter')) {
1429
delim = Lang.trimRight(delim);
1430
value = newVal = this._inputNode.get(VALUE);
1433
while ((newVal = Lang.trimRight(newVal)) &&
1434
(delimPos = newVal.length - delim.length) &&
1435
newVal.lastIndexOf(delim) === delimPos) {
1437
newVal = newVal.substring(0, delimPos);
1440
// Delimiter is one or more space characters, so just trim the
1442
newVal = Lang.trimRight(newVal);
1445
if (newVal !== value) {
1446
this.set(VALUE, newVal);
1452
* Handles <code>valueChange</code> events on the input node and fires a
1453
* <code>query</code> event when the input value meets the configured
1456
* @method _onInputValueChange
1457
* @param {EventFacade} e
1460
_onInputValueChange: function (e) {
1461
var newVal = e.newVal;
1463
// Don't query if the internal value is the same as the new value
1464
// reported by valueChange.
1465
if (newVal === this.get(VALUE)) {
1469
this.set(VALUE, newVal, {src: AutoCompleteBase.UI_SRC});
1473
* Handles source responses and fires the <code>results</code> event.
1475
* @method _onResponse
1476
* @param {EventFacade} e
1479
_onResponse: function (query, e) {
1480
// Ignore stale responses that aren't for the current query.
1481
if (query === this.get(QUERY)) {
1482
this._parseResponse(query, e.response, e.data);
1486
// -- Protected Default Event Handlers -------------------------------------
1489
* Default <code>clear</code> event handler. Sets the <code>results</code>
1490
* property to an empty array and <code>query</code> to null.
1492
* @method _defClearFn
1495
_defClearFn: function () {
1496
this._set(QUERY, null);
1497
this._set(RESULTS, []);
1501
* Default <code>query</code> event handler. Sets the <code>query</code>
1502
* property and sends a request to the source if one is configured.
1504
* @method _defQueryFn
1505
* @param {EventFacade} e
1508
_defQueryFn: function (e) {
1509
var query = e.query;
1511
Y.log('query: "' + query + '"; inputValue: "' + e.inputValue + '"', 'info', 'autocomplete-base');
1512
this.sendRequest(query); // sendRequest will set the 'query' attribute
1516
* Default <code>results</code> event handler. Sets the <code>results</code>
1517
* property to the latest results.
1519
* @method _defResultsFn
1520
* @param {EventFacade} e
1523
_defResultsFn: function (e) {
1524
Y.log('results: ' + Y.dump(e.results), 'info', 'autocomplete-base');
1525
this._set(RESULTS, e[RESULTS]);
1529
Y.AutoCompleteBase = AutoCompleteBase;
1532
}, '3.3.0' ,{optional:['autocomplete-sources'], requires:['array-extras', 'base-build', 'escape', 'event-valuechange', 'node-base']});
added
removed
sloecode/public/yui/3.3.0/build/autocomplete/autocomplete-base-debug.js
