autocomplete-base-debug.js revision c878779d09e717508716acb5f3b25a6176fa2672
729N/A * Provides automatic input completion or suggestions for text input fields and 919N/A * Extension that provides core autocomplete logic for a text input field or 919N/A * This extension cannot be instantiated directly, since it doesn't provide an 919N/A * actual implementation. It provides the core logic used by the 919N/A * <code>AutoComplete</code> class, and you can mix it into a custom class as 919N/A * follows if you'd like to create a customized autocomplete implementation: 729N/A * YUI().use('autocomplete-base', 'base', function (Y) { 729N/A * var MyAutoComplete = Y.Base.create('myAutocomplete', Y.Base, [Y.AutoComplete], { 729N/A * initializer: function () { 729N/A * this._bindInput(this.get('inputNode')); 729N/A * }, 729N/A * destructor: function () { 729N/A * this._unbindInput(this.get('inputNode')); 729N/A * } 729N/A * @submodule autocomplete-base 729N/A * @class AutoCompleteBase 729N/A * @param {Object} config configuration object 729N/A * Fires when the contents of the input field have changed and the input 729N/A * value meets the criteria necessary to generate an autocomplete query. 729N/A * @param {EventFacade} e Event facade with the following additional 729N/A * <dt>inputValue (String)</dt> 729N/A * Full contents of the text input field or textarea that generated 729N/A * <dt>query (String)</dt> 729N/A * Autocomplete query. This is the string that will be used to 729N/A * request completion results. It may or may not be the same as 729N/A * <code>inputValue</code>. * @preventable _defQueryFn * Fires after query results are received from the DataSource. If no * DataSource has been set, this event will not fire. * @param {EventFacade} e Event facade with the following additional * <dt>data (Array|Object)</dt> * Raw, unfiltered result data (if available). * <dt>query (String)</dt> * Query that generated these results. * <dt>results (Array|Object)</dt> * Normalized and filtered result data returned from the DataSource. * Fires after the input node's value changes, and before the * <code>query</code> event. * @param {EventFacade} e Event facade with the following additional * <dt>newVal (String)</dt> * Value of the input node after the change. * <dt>prevVal (String)</dt> * Value of the input node prior to the change. // -- Public Static Properties ------------------------------------------------- * Whether or not to enable the browser's built-in autocomplete * functionality for input fields. * @attribute allowBrowserAutocomplete * DataSource object which will be used to make queries. This can be * an actual DataSource instance or any other object with a * sendRequest() method that has the same signature as DataSource's * As an alternative to providing a DataSource, you could listen for * <code>query</code> events and handle them any way you see fit. * Providing a DataSource or DataSource-like object is optional, but * @type DataSource|Object|null * Node to monitor for changes, which will generate <code>query</code> * events when appropriate. May be either an input field or a textarea. * @type Node|HTMLElement|String * Minimum number of characters that must be entered before a * <code>query</code> event will be fired. A value of <code>0</code> * allows empty queries; a negative value will effectively disable all * <code>query</code> events. * @attribute minQueryLength * Current query, or <code>null</code> if there is no current query. * The query might not be the same as the current value of the input * node, both for timing reasons (due to <code>queryDelay</code>) and * because when one or more <code>queryDelimiter</code> separators are * in use, only the last portion of the delimited input string will be * used as the query value. * Number of milliseconds to delay after input before triggering a * <code>query</code> event. If new input occurs before this delay is * over, the previous input event will be ignored and a new delay will * This can be useful both to throttle queries to a remote data source * and to avoid distracting the user by showing them less relevant * results before they've paused their typing. * DataSource request template. This can be a function that accepts a * query as a parameter and returns a request string, or it can be a * string containing the placeholder "{query}", which will be replaced * with the actual URI-encoded query. * When using a string template, if it's necessary for the literal * string "{query}" to appear in the request, escape it with a slash: * While <code>requestTemplate</code> can be set to either a function or * a string, it will always be returned as a function that accepts a * query argument and returns a string. * @attribute requestTemplate * @default encodeURIComponent return function (
query) {
// Replace {query} with the URI-encoded query, but turn // \{query} into the literal string "{query}" to allow that // string to appear in the request if necessary. * Array of local result filter functions. If provided, each filter * will be called with two arguments when results are received: the * query and the results received from the DataSource. Each filter is * expected to return a filtered or modified version of those results, * which will then be passed on to subsequent filters, to the * <code>resultHighlighter</code> function (if set), and finally to * subscribers to the <code>results</code> event. * If no DataSource is set, result filters will not be called. * @attribute resultFilters * Function which will be used to highlight results. If provided, this * function will be called with two arguments after results have been * received and filtered: the query and the filtered results. The * highlighter is expected to return a modified version of the results * with the query highlighted in some form. * If no DataSource is set, the highlighter will not be called. * @attribute resultHighlighter // -- Protected Prototype Methods ------------------------------------------ Y.
error(
'No input node specified.');
// We're listening to the valueChange event from the // event-valuechange module here, not our own valueChange event // (which just wraps this one for convenience). * Returns the query portion of the specified input value, or * <code>null</code> if there is no suitable query within the input value. * In <code>autocomplete-base</code> this just returns the input value * itself, but it can be overridden to implement more complex logic, such as * adding support for query delimiters (see the * <code>autocomplete-delim</code> module). * @param {String} value input value from which to extract the query * @return {String|null} query // -- Protected Event Handlers --------------------------------------------- * Handles DataSource responses and fires the <code>results</code> event if * there appear to be results. // Ignore stale responses that aren't for the current query. // The highlighter is treated just like a filter except that // it's always called last. Concat is used to ensure that // the original filters array isn't touched. * Handles <code>valueChange</code> events on the input node and fires a * <code>query</code> event when the input value meets the configured Y.
log(
'valueChange: new: "' +
value +
'"; old: "' + e.
prevVal +
'"',
'info',
'autocompleteBase');
// -- Protected Default Event Handlers ------------------------------------- * Default <code>query</code> event handler. Sets the <code>query</code> * property and sends a request to the DataSource if one is configured. Y.
log(
'query: "' +
query +
'"; inputValue: "' + e.
inputValue +
'"',
'info',
'autocompleteBase');
// TODO: handle failures here, or should the implementer rely on DataSource events for that? },
'@VERSION@' ,{
requires:[
'base-base',
'event-valuechange',
'node-base']});