- Array
-
The full array will be provided to any configured filters for each
query. This is an easy way to create a fully client-side autocomplete
implementation.
Example: `['first result', 'second result', 'etc']`
- DataSource
-
A `DataSource` instance or other object that provides a DataSource-like
`sendRequest` method. See the `DataSource` documentation for details.
- Function
-
A function source will be called with the current query and a
callback function as parameters, and should either return an array of
results (for synchronous operation) or return nothing and pass an
array of results to the provided callback (for asynchronous
operation).
Example (synchronous):
function (query) {
return ['foo', 'bar'];
}
Example (async):
function (query, callback) {
callback(['foo', 'bar']);
}
- Object
-
An object will be treated as a query hashmap. If a property on the
object matches the current query, the value of that property will be
used as the response.
The response is assumed to be an array of results by default. If the
response is not an array, provide a `resultListLocator` to
process the response and return an array.
Example: `{foo: ['foo result 1', 'foo result 2'], bar: ['bar result']}`
If the optional `autocomplete-sources` module is loaded, then
the following additional source types will be supported as well:
- <select> Node
-
You may provide a YUI Node instance wrapping a <select>
element, and the options in the list will be used as results. You
will also need to specify a `resultTextLocator` of 'text'
or 'value', depending on what you want to use as the text of the
result.
Each result will be an object with the following properties:
- html (String)
-
HTML content of the <option> element.
- index (Number)
-
Index of the <option> element in the list.
- node (Y.Node)
-
Node instance referring to the original <option> element.
- selected (Boolean)
-
Whether or not this item is currently selected in the
<select> list.
- text (String)
-
Text content of the <option> element.
- value (String)
-
Value of the <option> element.
- String (JSONP URL)
-
If a URL with a `{callback}` placeholder is provided, it will be used to
make a JSONP request. The `{query}` placeholder will be replaced with
the current query, and the `{callback}` placeholder will be replaced
with an internally-generated JSONP callback name. Both placeholders must
appear in the URL, or the request will fail. An optional `{maxResults}`
placeholder may also be provided, and will be replaced with the value of
the maxResults attribute (or 1000 if the maxResults attribute is 0 or
less).
The response is assumed to be an array of results by default. If the
response is not an array, provide a `resultListLocator` to process the
response and return an array.
The `jsonp` module must be loaded in order for
JSONP URL sources to work. If the `jsonp` module
is not already loaded, it will be loaded on demand if possible.
Example: `'http://example.com/search?q={query}&callback={callback}'`
- String (XHR URL)
-
If a URL without a `{callback}` placeholder is provided, it will be used
to make a same-origin XHR request. The `{query}` placeholder will be
replaced with the current query. An optional `{maxResults}` placeholder
may also be provided, and will be replaced with the value of the
maxResults attribute (or 1000 if the maxResults attribute is 0 or less).
The response is assumed to be a JSON array of results by default. If the
response is a JSON object and not an array, provide a
`resultListLocator` to process the response and return an array. If the
response is in some form other than JSON, you will need to use a custom
DataSource instance as the source.
The `io-base` and `json-parse` modules
must be loaded in order for XHR URL sources to work. If
these modules are not already loaded, they will be loaded on demand
if possible.
Example: `'http://example.com/search?q={query}'`
- String (YQL query)
-
If a YQL query is provided, it will be used to make a YQL request. The
`{query}` placeholder will be replaced with the current autocomplete
query. This placeholder must appear in the YQL query, or the request
will fail. An optional `{maxResults}` placeholder may also be provided,
and will be replaced with the value of the maxResults attribute (or 1000
if the maxResults attribute is 0 or less).
The `yql` module must be loaded in order for YQL
sources to work. If the `yql` module is not
already loaded, it will be loaded on demand if possible.
Example: `'select * from search.suggest where query="{query}"'`
As an alternative to providing a source, you could simply listen for `query`
events and handle them any way you see fit. Providing a source is optional,
but will usually be simpler.
@attribute source
@type Array|DataSource|Function|Node|Object|String|null
**/
source: {
setter: '_setSource',
value: null
},
/**
May be used to force a specific source type, overriding the automatic source
type detection. It should almost never be necessary to do this, but as they
taught us in the Boy Scouts, one should always be prepared, so it's here if
you need it. Be warned that if you set this attribute and something breaks,
it's your own fault.
Supported `sourceType` values are: 'array', 'datasource', 'function', and
'object'.
If the `autocomplete-sources` module is loaded, the following additional
source types are supported: 'io', 'jsonp', 'select', 'string', 'yql'
@attribute sourceType
@type String
**/
sourceType: {
value: null
},
/**
If the `inputNode` specified at instantiation time has a `node-tokeninput`
plugin attached to it, this attribute will be a reference to the
`Y.Plugin.TokenInput` instance.
@attribute tokenInput
@type Plugin.TokenInput
@readonly
**/
tokenInput: {
readOnly: true
},
/**
Current value of the input node.
@attribute value
@type String
@default ''
**/
value: {
// Why duplicate this._inputNode.get('value')? Because we need a
// reliable way to track the source of value changes. We want to perform
// completion when the user changes the value, but not when we change
// the value.
value: ''
}
};
// This tells Y.Base.create() to copy these static properties to any class
// AutoCompleteBase is mixed into.
AutoCompleteBase._buildCfg = {
aggregates: ['SOURCE_TYPES'],
statics : ['UI_SRC']
};
/**
Mapping of built-in source types to their setter functions. DataSource instances
and DataSource-like objects are handled natively, so are not mapped here.
@property SOURCE_TYPES
@type {Object}
@static
**/
AutoCompleteBase.SOURCE_TYPES = {
array : '_createArraySource',
'function': '_createFunctionSource',
object : '_createObjectSource'
};
AutoCompleteBase.UI_SRC = (Y.Widget && Y.Widget.UI_SRC) || 'ui';
Y.AutoCompleteBase = AutoCompleteBase;
}, '3.17.2', {
"optional": [
"autocomplete-sources"
],
"requires": [
"array-extras",
"base-build",
"escape",
"event-valuechange",
"node-base"
]
});