//>>built define("dijit/form/_AutoCompleterMixin", [ "dojo/_base/connect", // keys keys.SHIFT "dojo/data/util/filter", // patternToRegExp "dojo/_base/declare", // declare "dojo/_base/Deferred", // Deferred.when "dojo/dom-attr", // domAttr.get "dojo/_base/event", // event.stop "dojo/keys", "dojo/_base/lang", // lang.clone lang.hitch "dojo/query", // query "dojo/regexp", // regexp.escapeString "dojo/_base/sniff", // has("ie") "dojo/string", // string.substitute "dojo/_base/window", // win.doc.selection.createRange "./DataList", "../registry", // registry.byId "./_TextBoxMixin" // defines _TextBoxMixin.selectInputText ], function(connect, filter, declare, Deferred, domAttr, event, keys, lang, query, regexp, has, string, win, DataList, registry, _TextBoxMixin){ // module: // dijit/form/_AutoCompleterMixin // summary: // A mixin that implements the base functionality for `dijit.form.ComboBox`/`dijit.form.FilteringSelect` return declare("dijit.form._AutoCompleterMixin", null, { // summary: // A mixin that implements the base functionality for `dijit.form.ComboBox`/`dijit.form.FilteringSelect` // description: // All widgets that mix in dijit.form._AutoCompleterMixin must extend `dijit.form._FormValueWidget`. // tags: // protected // item: Object // This is the item returned by the dojo.data.store implementation that // provides the data for this ComboBox, it's the currently selected item. item: null, // pageSize: Integer // Argument to data provider. // Specifies number of search results per page (before hitting "next" button) pageSize: Infinity, // store: [const] dojo.store.api.Store // Reference to data provider object used by this ComboBox store: null, // fetchProperties: Object // Mixin to the store's fetch. // For example, to set the sort order of the ComboBox menu, pass: // | { sort: [{attribute:"name",descending: true}] } // To override the default queryOptions so that deep=false, do: // | { queryOptions: {ignoreCase: true, deep: false} } fetchProperties:{}, // query: Object // A query that can be passed to 'store' to initially filter the items, // before doing further filtering based on `searchAttr` and the key. // Any reference to the `searchAttr` is ignored. query: {}, // autoComplete: Boolean // If user types in a partial string, and then tab out of the `` box, // automatically copy the first entry displayed in the drop down list to // the `` field autoComplete: true, // highlightMatch: String // One of: "first", "all" or "none". // // If the ComboBox/FilteringSelect opens with the search results and the searched // string can be found, it will be highlighted. If set to "all" // then will probably want to change `queryExpr` parameter to '*${0}*' // // Highlighting is only performed when `labelType` is "text", so as to not // interfere with any HTML markup an HTML label might contain. highlightMatch: "first", // searchDelay: Integer // Delay in milliseconds between when user types something and we start // searching based on that value searchDelay: 100, // searchAttr: String // Search for items in the data store where this attribute (in the item) // matches what the user typed searchAttr: "name", // labelAttr: String? // The entries in the drop down list come from this attribute in the // dojo.data items. // If not specified, the searchAttr attribute is used instead. labelAttr: "", // labelType: String // Specifies how to interpret the labelAttr in the data store items. // Can be "html" or "text". labelType: "text", // queryExpr: String // This specifies what query ComboBox/FilteringSelect sends to the data store, // based on what the user has typed. Changing this expression will modify // whether the drop down shows only exact matches, a "starting with" match, // etc. Use it in conjunction with highlightMatch. // dojo.data query expression pattern. // `${0}` will be substituted for the user text. // `*` is used for wildcards. // `${0}*` means "starts with", `*${0}*` means "contains", `${0}` means "is" queryExpr: "${0}*", // ignoreCase: Boolean // Set true if the ComboBox/FilteringSelect should ignore case when matching possible items ignoreCase: true, // Flags to _HasDropDown to limit height of drop down to make it fit in viewport maxHeight: -1, // For backwards compatibility let onClick events propagate, even clicks on the down arrow button _stopClickEvents: false, _getCaretPos: function(/*DomNode*/ element){ // khtml 3.5.2 has selection* methods as does webkit nightlies from 2005-06-22 var pos = 0; if(typeof(element.selectionStart) == "number"){ // FIXME: this is totally borked on Moz < 1.3. Any recourse? pos = element.selectionStart; }else if(has("ie")){ // in the case of a mouse click in a popup being handled, // then the win.doc.selection is not the textarea, but the popup // var r = win.doc.selection.createRange(); // hack to get IE 6 to play nice. What a POS browser. var tr = win.doc.selection.createRange().duplicate(); var ntr = element.createTextRange(); tr.move("character",0); ntr.move("character",0); try{ // If control doesn't have focus, you get an exception. // Seems to happen on reverse-tab, but can also happen on tab (seems to be a race condition - only happens sometimes). // There appears to be no workaround for this - googled for quite a while. ntr.setEndPoint("EndToEnd", tr); pos = String(ntr.text).replace(/\r/g,"").length; }catch(e){ // If focus has shifted, 0 is fine for caret pos. } } return pos; }, _setCaretPos: function(/*DomNode*/ element, /*Number*/ location){ location = parseInt(location); _TextBoxMixin.selectInputText(element, location, location); }, _setDisabledAttr: function(/*Boolean*/ value){ // Additional code to set disabled state of ComboBox node. // Overrides _FormValueWidget._setDisabledAttr() or ValidationTextBox._setDisabledAttr(). this.inherited(arguments); this.domNode.setAttribute("aria-disabled", value); }, _abortQuery: function(){ // stop in-progress query if(this.searchTimer){ clearTimeout(this.searchTimer); this.searchTimer = null; } if(this._fetchHandle){ if(this._fetchHandle.cancel){ this._cancelingQuery = true; this._fetchHandle.cancel(); this._cancelingQuery = false; } this._fetchHandle = null; } }, _onInput: function(/*Event*/ evt){ // summary: // Handles paste events this.inherited(arguments); if(evt.charOrCode == 229){ // IME or cut/paste event this._onKey(evt); } }, _onKey: function(/*Event*/ evt){ // summary: // Handles keyboard events var key = evt.charOrCode; // except for cutting/pasting case - ctrl + x/v if(evt.altKey || ((evt.ctrlKey || evt.metaKey) && (key != 'x' && key != 'v')) || key == keys.SHIFT){ return; // throw out weird key combinations and spurious events } var doSearch = false; var pw = this.dropDown; var highlighted = null; this._prev_key_backspace = false; this._abortQuery(); // _HasDropDown will do some of the work: // 1. when drop down is not yet shown: // - if user presses the down arrow key, call loadDropDown() // 2. when drop down is already displayed: // - on ESC key, call closeDropDown() // - otherwise, call dropDown.handleKey() to process the keystroke this.inherited(arguments); if(this._opened){ highlighted = pw.getHighlightedOption(); } switch(key){ case keys.PAGE_DOWN: case keys.DOWN_ARROW: case keys.PAGE_UP: case keys.UP_ARROW: // Keystroke caused ComboBox_menu to move to a different item. // Copy new item to box. if(this._opened){ this._announceOption(highlighted); } event.stop(evt); break; case keys.ENTER: // prevent submitting form if user presses enter. Also // prevent accepting the value if either Next or Previous // are selected if(highlighted){ // only stop event on prev/next if(highlighted == pw.nextButton){ this._nextSearch(1); event.stop(evt); break; }else if(highlighted == pw.previousButton){ this._nextSearch(-1); event.stop(evt); break; } }else{ // Update 'value' (ex: KY) according to currently displayed text this._setBlurValue(); // set value if needed this._setCaretPos(this.focusNode, this.focusNode.value.length); // move cursor to end and cancel highlighting } // default case: // if enter pressed while drop down is open, or for FilteringSelect, // if we are in the middle of a query to convert a directly typed in value to an item, // prevent submit if(this._opened || this._fetchHandle){ event.stop(evt); } // fall through case keys.TAB: var newvalue = this.get('displayedValue'); // if the user had More Choices selected fall into the // _onBlur handler if(pw && ( newvalue == pw._messages["previousMessage"] || newvalue == pw._messages["nextMessage"]) ){ break; } if(highlighted){ this._selectOption(highlighted); } // fall through case keys.ESCAPE: if(this._opened){ this._lastQuery = null; // in case results come back later this.closeDropDown(); } break; case ' ': if(highlighted){ // user is effectively clicking a choice in the drop down menu event.stop(evt); this._selectOption(highlighted); this.closeDropDown(); }else{ // user typed a space into the input box, treat as normal character doSearch = true; } break; case keys.DELETE: case keys.BACKSPACE: this._prev_key_backspace = true; doSearch = true; break; default: // Non char keys (F1-F12 etc..) shouldn't open list. // Ascii characters and IME input (Chinese, Japanese etc.) should. //IME input produces keycode == 229. doSearch = typeof key == 'string' || key == 229; } if(doSearch){ // need to wait a tad before start search so that the event // bubbles through DOM and we have value visible this.item = undefined; // undefined means item needs to be set this.searchTimer = setTimeout(lang.hitch(this, "_startSearchFromInput"),1); } }, _autoCompleteText: function(/*String*/ text){ // summary: // Fill in the textbox with the first item from the drop down // list, and highlight the characters that were // auto-completed. For example, if user typed "CA" and the // drop down list appeared, the textbox would be changed to // "California" and "ifornia" would be highlighted. var fn = this.focusNode; // IE7: clear selection so next highlight works all the time _TextBoxMixin.selectInputText(fn, fn.value.length); // does text autoComplete the value in the textbox? var caseFilter = this.ignoreCase? 'toLowerCase' : 'substr'; if(text[caseFilter](0).indexOf(this.focusNode.value[caseFilter](0)) == 0){ var cpos = this.autoComplete ? this._getCaretPos(fn) : fn.value.length; // only try to extend if we added the last character at the end of the input if((cpos+1) > fn.value.length){ // only add to input node as we would overwrite Capitalisation of chars // actually, that is ok fn.value = text;//.substr(cpos); // visually highlight the autocompleted characters _TextBoxMixin.selectInputText(fn, cpos); } }else{ // text does not autoComplete; replace the whole value and highlight fn.value = text; _TextBoxMixin.selectInputText(fn); } }, _openResultList: function(/*Object*/ results, /*Object*/ query, /*Object*/ options){ // summary: // Callback when a search completes. // description: // 1. generates drop-down list and calls _showResultList() to display it // 2. if this result list is from user pressing "more choices"/"previous choices" // then tell screen reader to announce new option this._fetchHandle = null; if( this.disabled || this.readOnly || (query[this.searchAttr] !== this._lastQuery) // TODO: better way to avoid getting unwanted notify ){ return; } var wasSelected = this.dropDown.getHighlightedOption(); this.dropDown.clearResultList(); if(!results.length && options.start == 0){ // if no results and not just the previous choices button this.closeDropDown(); return; } // Fill in the textbox with the first item from the drop down list, // and highlight the characters that were auto-completed. For // example, if user typed "CA" and the drop down list appeared, the // textbox would be changed to "California" and "ifornia" would be // highlighted. var nodes = this.dropDown.createOptions( results, options, lang.hitch(this, "_getMenuLabelFromItem") ); // show our list (only if we have content, else nothing) this._showResultList(); // #4091: // tell the screen reader that the paging callback finished by // shouting the next choice if(options.direction){ if(1 == options.direction){ this.dropDown.highlightFirstOption(); }else if(-1 == options.direction){ this.dropDown.highlightLastOption(); } if(wasSelected){ this._announceOption(this.dropDown.getHighlightedOption()); } }else if(this.autoComplete && !this._prev_key_backspace // when the user clicks the arrow button to show the full list, // startSearch looks for "*". // it does not make sense to autocomplete // if they are just previewing the options available. && !/^[*]+$/.test(query[this.searchAttr].toString())){ this._announceOption(nodes[1]); // 1st real item } }, _showResultList: function(){ // summary: // Display the drop down if not already displayed, or if it is displayed, then // reposition it if necessary (reposition may be necessary if drop down's height changed). this.closeDropDown(true); this.openDropDown(); this.domNode.setAttribute("aria-expanded", "true"); }, loadDropDown: function(/*Function*/ /*===== callback =====*/){ // Overrides _HasDropDown.loadDropDown(). // This is called when user has pressed button icon or pressed the down arrow key // to open the drop down. this._startSearchAll(); }, isLoaded: function(){ // signal to _HasDropDown that it needs to call loadDropDown() to load the // drop down asynchronously before displaying it return false; }, closeDropDown: function(){ // Overrides _HasDropDown.closeDropDown(). Closes the drop down (assuming that it's open). // This method is the callback when the user types ESC or clicking // the button icon while the drop down is open. It's also called by other code. this._abortQuery(); if(this._opened){ this.inherited(arguments); this.domNode.setAttribute("aria-expanded", "false"); this.focusNode.removeAttribute("aria-activedescendant"); } }, _setBlurValue: function(){ // if the user clicks away from the textbox OR tabs away, set the // value to the textbox value // #4617: // if value is now more choices or previous choices, revert // the value var newvalue = this.get('displayedValue'); var pw = this.dropDown; if(pw && ( newvalue == pw._messages["previousMessage"] || newvalue == pw._messages["nextMessage"] ) ){ this._setValueAttr(this._lastValueReported, true); }else if(typeof this.item == "undefined"){ // Update 'value' (ex: KY) according to currently displayed text this.item = null; this.set('displayedValue', newvalue); }else{ if(this.value != this._lastValueReported){ this._handleOnChange(this.value, true); } this._refreshState(); } }, _setItemAttr: function(/*item*/ item, /*Boolean?*/ priorityChange, /*String?*/ displayedValue){ // summary: // Set the displayed valued in the input box, and the hidden value // that gets submitted, based on a dojo.data store item. // description: // Users shouldn't call this function; they should be calling // set('item', value) // tags: // private var value = ''; if(item){ if(!displayedValue){ displayedValue = this.store._oldAPI ? // remove getValue() for 2.0 (old dojo.data API) this.store.getValue(item, this.searchAttr) : item[this.searchAttr]; } value = this._getValueField() != this.searchAttr ? this.store.getIdentity(item) : displayedValue; } this.set('value', value, priorityChange, displayedValue, item); }, _announceOption: function(/*Node*/ node){ // summary: // a11y code that puts the highlighted option in the textbox. // This way screen readers will know what is happening in the // menu. if(!node){ return; } // pull the text value from the item attached to the DOM node var newValue; if(node == this.dropDown.nextButton || node == this.dropDown.previousButton){ newValue = node.innerHTML; this.item = undefined; this.value = ''; }else{ newValue = (this.store._oldAPI ? // remove getValue() for 2.0 (old dojo.data API) this.store.getValue(node.item, this.searchAttr) : node.item[this.searchAttr]).toString(); this.set('item', node.item, false, newValue); } // get the text that the user manually entered (cut off autocompleted text) this.focusNode.value = this.focusNode.value.substring(0, this._lastInput.length); // set up ARIA activedescendant this.focusNode.setAttribute("aria-activedescendant", domAttr.get(node, "id")); // autocomplete the rest of the option to announce change this._autoCompleteText(newValue); }, _selectOption: function(/*DomNode*/ target){ // summary: // Menu callback function, called when an item in the menu is selected. this.closeDropDown(); if(target){ this._announceOption(target); } this._setCaretPos(this.focusNode, this.focusNode.value.length); this._handleOnChange(this.value, true); }, _startSearchAll: function(){ this._startSearch(''); }, _startSearchFromInput: function(){ this._startSearch(this.focusNode.value.replace(/([\\\*\?])/g, "\\$1")); }, _getQueryString: function(/*String*/ text){ return string.substitute(this.queryExpr, [text]); }, _startSearch: function(/*String*/ key){ // summary: // Starts a search for elements matching key (key=="" means to return all items), // and calls _openResultList() when the search completes, to display the results. if(!this.dropDown){ var popupId = this.id + "_popup", dropDownConstructor = lang.isString(this.dropDownClass) ? lang.getObject(this.dropDownClass, false) : this.dropDownClass; this.dropDown = new dropDownConstructor({ onChange: lang.hitch(this, this._selectOption), id: popupId, dir: this.dir, textDir: this.textDir }); this.focusNode.removeAttribute("aria-activedescendant"); this.textbox.setAttribute("aria-owns",popupId); // associate popup with textbox } this._lastInput = key; // Store exactly what was entered by the user. // Setup parameters to be passed to store.query(). // Create a new query to prevent accidentally querying for a hidden // value from FilteringSelect's keyField var query = lang.clone(this.query); // #5970 var options = { start: 0, count: this.pageSize, queryOptions: { // remove for 2.0 ignoreCase: this.ignoreCase, deep: true } }; lang.mixin(options, this.fetchProperties); // Generate query var qs = this._getQueryString(key), q; if(this.store._oldAPI){ // remove this branch for 2.0 q = qs; }else{ // Query on searchAttr is a regex for benefit of dojo.store.Memory, // but with a toString() method to help dojo.store.JsonRest. // Search string like "Co*" converted to regex like /^Co.*$/i. q = filter.patternToRegExp(qs, this.ignoreCase); q.toString = function(){ return qs; }; } this._lastQuery = query[this.searchAttr] = q; // Function to run the query, wait for the results, and then call _openResultList() var _this = this, startQuery = function(){ var resPromise = _this._fetchHandle = _this.store.query(query, options); Deferred.when(resPromise, function(res){ _this._fetchHandle = null; res.total = resPromise.total; _this._openResultList(res, query, options); }, function(err){ _this._fetchHandle = null; if(!_this._cancelingQuery){ // don't treat canceled query as an error console.error(_this.declaredClass + ' ' + err.toString()); _this.closeDropDown(); } }); }; // #5970: set _lastQuery, *then* start the timeout // otherwise, if the user types and the last query returns before the timeout, // _lastQuery won't be set and their input gets rewritten this.searchTimer = setTimeout(lang.hitch(this, function(query, _this){ this.searchTimer = null; startQuery(); // Setup method to handle clicking next/previous buttons to page through results this._nextSearch = this.dropDown.onPage = function(direction){ options.start += options.count * direction; // tell callback the direction of the paging so the screen // reader knows which menu option to shout options.direction = direction; startQuery(); _this.focus(); }; }, query, this), this.searchDelay); }, _getValueField: function(){ // summary: // Helper for postMixInProperties() to set this.value based on data inlined into the markup. // Returns the attribute name in the item (in dijit.form._ComboBoxDataStore) to use as the value. return this.searchAttr; }, //////////// INITIALIZATION METHODS /////////////////////////////////////// constructor: function(){ this.query={}; this.fetchProperties={}; }, postMixInProperties: function(){ if(!this.store){ var srcNodeRef = this.srcNodeRef; var list = this.list; if(list){ this.store = registry.byId(list); }else{ // if user didn't specify store, then assume there are option tags this.store = new DataList({}, srcNodeRef); } // if there is no value set and there is an option list, set // the value to the first value to be consistent with native Select // Firefox and Safari set value // IE6 and Opera set selectedIndex, which is automatically set // by the selected attribute of an option tag // IE6 does not set value, Opera sets value = selectedIndex if(!("value" in this.params)){ var item = (this.item = this.store.fetchSelectedItem()); if(item){ var valueField = this._getValueField(); // remove getValue() for 2.0 (old dojo.data API) this.value = this.store._oldAPI ? this.store.getValue(item, valueField) : item[valueField]; } } } this.inherited(arguments); }, postCreate: function(){ // summary: // Subclasses must call this method from their postCreate() methods // tags: // protected // find any associated label element and add to ComboBox node. var label=query('label[for="'+this.id+'"]'); if(label.length){ label[0].id = (this.id+"_label"); this.domNode.setAttribute("aria-labelledby", label[0].id); } this.inherited(arguments); }, _getMenuLabelFromItem: function(/*Item*/ item){ var label = this.labelFunc(item, this.store), labelType = this.labelType; // If labelType is not "text" we don't want to screw any markup ot whatever. if(this.highlightMatch != "none" && this.labelType == "text" && this._lastInput){ label = this.doHighlight(label, this._escapeHtml(this._lastInput)); labelType = "html"; } return {html: labelType == "html", label: label}; }, doHighlight: function(/*String*/ label, /*String*/ find){ // summary: // Highlights the string entered by the user in the menu. By default this // highlights the first occurrence found. Override this method // to implement your custom highlighting. // tags: // protected var // Add (g)lobal modifier when this.highlightMatch == "all" and (i)gnorecase when this.ignoreCase == true modifiers = (this.ignoreCase ? "i" : "") + (this.highlightMatch == "all" ? "g" : ""), i = this.queryExpr.indexOf("${0}"); find = regexp.escapeString(find); // escape regexp special chars return this._escapeHtml(label).replace( // prepend ^ when this.queryExpr == "${0}*" and append $ when this.queryExpr == "*${0}" new RegExp((i == 0 ? "^" : "") + "("+ find +")" + (i == (this.queryExpr.length - 4) ? "$" : ""), modifiers), '$1' ); // returns String, (almost) valid HTML (entities encoded) }, _escapeHtml: function(/*String*/ str){ // TODO Should become dojo.html.entities(), when exists use instead // summary: // Adds escape sequences for special characters in XML: &<>"' str = String(str).replace(/&/gm, "&").replace(//gm, ">").replace(/"/gm, """); //balance" return str; // string }, reset: function(){ // Overrides the _FormWidget.reset(). // Additionally reset the .item (to clean up). this.item = null; this.inherited(arguments); }, labelFunc: function(/*item*/ item, /*dojo.store.api.Store*/ store){ // summary: // Computes the label to display based on the dojo.data store item. // returns: // The label that the ComboBox should display // tags: // private // Use toString() because XMLStore returns an XMLItem whereas this // method is expected to return a String (#9354). // Remove getValue() for 2.0 (old dojo.data API) return (store._oldAPI ? store.getValue(item, this.labelAttr || this.searchAttr) : item[this.labelAttr || this.searchAttr]).toString(); // String }, _setValueAttr: function(/*String*/ value, /*Boolean?*/ priorityChange, /*String?*/ displayedValue, /*item?*/ item){ // summary: // Hook so set('value', value) works. // description: // Sets the value of the select. this._set("item", item||null); // value not looked up in store if(!value){ value = ''; } // null translates to blank this.inherited(arguments); }, _setTextDirAttr: function(/*String*/ textDir){ // summary: // Setter for textDir, needed for the dropDown's textDir update. // description: // Users shouldn't call this function; they should be calling // set('textDir', value) // tags: // private this.inherited(arguments); // update the drop down also (_ComboBoxMenuMixin) if(this.dropDown){ this.dropDown._set("textDir", textDir); } } }); });