1 前言

项目需要,需要编写一个简单的Python脚本编辑器。Python脚本内容简单,模式固定,形式如下：

def execRule(r):<br /> if .......:<br /> //do something<br /> elif .....:<br /> //do something 

脚本中只有两三个固定的对象,对象的属性和方法已知。要求支持关键字高亮显示。并且能够具备类似IDE一样的对象属性联想功能。

拿到这个需求,首先想到的如果要支持高亮显示,只能使用DIV作为文本编辑区域.Dojo的Combox的autoComplet功能可以为我所用。就这么开始吧.......

2 重点代码介绍

2.1 自动完成功能

dojo的Combox是一个INPUT,而且其AutoComplete是会覆盖整个文本框内的文本,针对这种情况,必须自己定一个全新的Widget.我的策略如下,定义全新的Widget：

dojo.provide("bmc.widget.AutoCompleteEditor");<br /> dojo.require("dijit.form.ComboBox");<br /> dojo.declare(<br /> "bmc.widget.AutoCompleteEditor",<br /> [dijit._Widget, dijit._Templated],<br /> ......<br /> );<br />

这个Widget的属性和代码基本完全照抄了dojo的dijit.form.ComboBoxMixin(定义在dojo的ComboBox.js)。完全拷贝下来不是我需要的,我做的第一步就是修改这个Widget的templateString

templateString: '<div style="height:100px;overflow:auto;font-size=small;border: 2px solid" border="thick double yellow" contentEditable="true" autocomplete="off" dojoAttachEvent="onkeypress:_onKeyPress, onfocus:compositionend"/<br /> dojoAttachPoint="textbox,focusNode" waiRole="textbox" waiState="haspopup-true,autocomplete-list"></div>',<br />

由于模版字符串的变化造成了很多原先的方法,属性都不在需要,我做了删除,这里不再赘述。接着需要修改的就是autoComplete提示框的位置.要能跟随光标的变化,IE下是可以获得光标位置的,因此增加如下代码

_showResultList: function(){<br /> /...................<br /> 在这个函数最后增加<br /> .................../</p> <p> if (dojo.isIE)<br /> {<br /> dijit.removeWaiState(this.focusNode, "owns");<br /> var range = document.selection.createRange();<br /> this._popupWidget.domNode.parentNode.style.left = range.offsetLeft + 'px';<br /> this._popupWidget.domNode.parentNode.style.top = (range.offsetTop + 13) + 'px';<br /> this._popupWidget.domNode.parentNode.style.width = 200;<br /> this._popupWidget.domNode.style.width = 200;<br /> }<br /> },

另外就是Combobox原先只是单个单词,而在线编辑器.需要根据当前鼠标的位置,获得左边的文本以及右边的文本,并获得光标前第一个单词的文本(用于联想对象属性),为此增加如下函数

setTextValue: function()<br /> {<br /> var pos = this._getCaretPos(this.focusNode);<br /> this.leftTextValue = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(0, pos);<br /> this.leftTextValue = this.leftTextValue.substr(0,this.getWordBeginIndex(this.leftTextValue) + 1);<br /> this.rigthtTextValue = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(pos, this.focusNode[dojo.isIE?'innerText':'textContent'].length);<br /> },

其中_getCaretPos获得光标位置,getWordBeginIndex获得所联想的单词的起始位置,这样当自动完成的时候,我只需要把光标左边的文本,联想出的文本,光标右边的文本相加即为完成后的文本.如此一来,继续修改原dojo代码中的autocomplete部分代码即可,这一部分比较简单,读者可以参阅最后原代码中的_autoCompleteText函数即可.这里值得提出的就是当DIV中内容发生改变的时候,不能在修改完innerHTML后立即执行对新内容的操作,所以代码中通过setTimeout方式,延时处理修改后的内容。

接下来还需要考虑不同情况下, 下拉框结果集的变化,dojo的combobox是根据store属性中的值来构造下拉列表的,因此只需要修改store即可,为此我定义了如下两个成员entityStore,subStoreMap,其中entityStore就是一级对象成员,存储在Store中；二级属性成员存储在 subStoreMap中。举例说明：比如一级对象有个叫bus,r则subStoreMap['bus']存放bus对象的属性.在_onkeyPress函数中增加对'.'的处理 ,修改store属性即可实现对象属性的联想。当然这个键盘响应函数中还要增加其他的控制,来决定store为空还是一级对象集合.

2.2 关键字高亮功能

这个相对比较简单,大体思路是,找出文本中的关键字在文本中的位置,利用textRange的execCommand进行着色和加粗.值得注意的是,对于String的substring一个换行符是两个字符,而在textRange对象中换行是一个字符,所以代码如下

_boldWord: function(element, begin, end)<br /> {<br /> if (dojo.doc.body.createTextRange) {<br /> var range = dojo.doc.body.createTextRange();<br /> range.moveToElementText(element);<br /> var line1 = element.innerText.substring(0, begin).split('/n').length - 1;<br /> var line2 = element.innerText.substring(end, element.innerText.length).split('/n').length - 1;<br /> range.moveEnd('character', end - element.innerText.length + line2);<br /> range.moveStart('character', begin - line1);<br /> if (!range.queryCommandState('bold')) {<br /> range.execCommand('bold', false, null);<br /> range.execCommand('forecolor', false, this.highlightColor);<br /> }<br /> }<br /> },

3 Widget代码

dojo.provide("dijit.form.AutoCompleteEditor");<br /> dojo.require("dijit.form.ComboBox");<br /> dojo.declare(<br /> "dijit.form.AutoCompleteEditor",<br /> [dijit._Widget, dijit._Templated],<br /> {<br /> // summary:<br /> // Implements the base functionality for ComboBox/FilteringSelect<br /> // description:<br /> // All widgets that mix in dijit.form.ComboBoxMixin must extend dijit.form._FormValueWidget<br /> // item: Object<br /> // This is the item returned by the dojo.data.store implementation that<br /> // provides the data for this cobobox, it's the currently selected item.<br /> item: null,<br /> // pageSize: Integer<br /> // Argument to data provider.<br /> // Specifies number of search results per page (before hitting "next" button)<br /> pageSize: Infinity,<br /> // store: Object<br /> // Reference to data provider object used by this ComboBox<br /> store: null,<br /> // fetchProperties: Object<br /> // Mixin to the dojo.data store's fetch.<br /> // For example, to set the sort order of the ComboBox menu, pass:<br /> // {sort:{attribute:"name",descending:true}}<br /> fetchProperties:{},<br /> // query: Object<br /> // A query that can be passed to 'store' to initially filter the items,<br /> // before doing further filtering based on `searchAttr` and the key.<br /> // Any reference to the `searchAttr` is ignored.<br /> query: {},<br /> // autoComplete: Boolean<br /> // If you type in a partial string, and then tab out of the `<input>` box,<br /> // automatically copy the first entry displayed in the drop down list to<br /> // the `<input>` field<br /> autoComplete: false,<br /> // highlightMatch: String<br /> // One of: "first", "all" or "none".<br /> // If the ComboBox opens with the serach results and the searched<br /> // string can be found it will be highlighted.<br /> // This value is not considered when labelType!="text" to not<br /> // screw up any mark up the label might contain.<br /> highlightMatch: "first",</p> <p> // searchDelay: Integer<br /> // Delay in milliseconds between when user types something and we start<br /> // searching based on that value<br /> searchDelay: 100,<br /> // searchAttr: String<br /> // Searches pattern match against this field<br /> searchAttr: "name",<br /> // labelAttr: String<br /> // Optional. The text that actually appears in the drop down.<br /> // If not specified, the searchAttr text is used instead.<br /> labelAttr: "",<br /> // labelType: String<br /> // "html" or "text"<br /> labelType: "text",<br /> // queryExpr: String<br /> // dojo.data query expression pattern.<br /> // `${0}` will be substituted for the user text.<br /> // `*` is used for wildcards.<br /> // `${0}*` means "starts with", `*${0}*` means "contains", `${0}` means "is"<br /> queryExpr: "${0}*",<br /> // ignoreCase: Boolean<br /> // Set true if the ComboBox should ignore case when matching possible items<br /> ignoreCase: true,<br /> // hasDownArrow: Boolean<br /> // Set this textbox to have a down arrow button.<br /> // Defaults to true.<br /> hasDownArrow:false,<br /> templateString: '<div style="height:100px;overflow:auto;font-size=small;border: 2px solid" border="thick double yellow" contentEditable="true" autocomplete="off" dojoAttachEvent="onkeypress:_onKeyPress, onfocus:compositionend"/<br /> dojoAttachPoint="textbox,focusNode" waiRole="textbox" waiState="haspopup-true,autocomplete-list"></div>',<br /> baseClass:"dijitComboBox",</p> <p> keyWords:['and', 'or', 'if'],<br /> noliterWords:['/n', ' ', '.','(',')', '=', '>', '<'],<br /> leftTextValue: '',<br /> rigthtTextValue: '',<br /> entityStore: null,<br /> subStoreMap: null,<br /> highlightColor: 'blue',<br /> _getCaretPos: function(/*DomNode*/ element){<br /> var CaretPos = 0; // IE Support<br /> if (document.selection) {<br /> element.focus ();<br /> var Sel = document.selection.createRange();<br /> Sel.moveStart ('character', -element.innerText.length);<br /> var text = Sel.text;<br /> for (var i = 0; i < element.innerText.length; i++)<br /> {<br /> if (element.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length))<br /> {<br /> CaretPos = i + 1;<br /> }<br /> }<br /> }<br /> // Firefox support<br /> else if (element.selectionStart || element.selectionStart == '0')<br /> CaretPos = element.selectionStart;<br /> return (CaretPos);<br /> },<br /> _setCaretPos: function(/*DomNode*/ element, /*Number*/ location){<br /> if(element.setSelectionRange)<br /> {<br /> element.focus();<br /> element.setSelectionRange(location,location);<br /> }<br /> else if (dojo.doc.body.createTextRange) {<br /> var range = dojo.doc.body.createTextRange();<br /> range.moveToElementText(element);<br /> range.collapse(true);<br /> range.move('character', location);<br /> range.select();<br /> }<br /> },</p> <p> _onKeyPress: function(/*Event*/ evt){<br /> // summary: handles keyboard events<br /> var key = evt.charOrCode;<br /> //except for cutting/pasting case - ctrl + x/v<br /> if(evt.altKey || (evt.ctrlKey && (key != 'x' && key != 'v')) || evt.key == dojo.keys.SHIFT){<br /> return; // throw out weird key combinations and spurious events<br /> }<br /> var doSearch = false;<br /> var pw = this._popupWidget;<br /> var dk = dojo.keys;<br /> if(this._isShowingNow){<br /> pw.handleKey(key);<br /> }<br /> switch(key){<br /> case dk.PAGE_DOWN:<br /> case dk.DOWN_ARROW:<br /> if(!this._isShowingNow||this._prev_key_esc){<br /> return<br /> }else{<br /> dojo.stopEvent(evt);<br /> this._prev_key_backspace = false;<br /> this._prev_key_esc = false;<br /> }<br /> break;<br /> case dk.PAGE_UP:<br /> case dk.UP_ARROW:<br /> if (this._isShowingNow) {<br /> dojo.stopEvent(evt);<br /> this._prev_key_backspace = false;<br /> this._prev_key_esc = false;<br /> }<br /> else{<br /> return;<br /> }<br /> break;<br /> case dojo.keys.ENTER:<br /> case dojo.keys.TAB:<br /> if (this._isShowingNow) {<br /> this._announceOption(this._popupWidget.getHighlightedOption());<br /> text = this.focusNode[dojo.isIE?'innerText':'textContent'];<br /> //pos = this.leftTextValue.length;<br /> //pos += this.focusNode[dojo.isIE?'innerText':'textContent'].length;<br /> this.focusNode[dojo.isIE?'innerText':'textContent'] = text;<br /> this.store = this.entityStore;<br /> //this._setCaretPos(this.focusNode, pos);<br /> this.clearTextValue();<br /> evt.preventDefault();<br /> this._prev_key_backspace = false;<br /> this._prev_key_esc = false;<br /> this._lastQuery = null; // in case results come back later<br /> this._hideResultList();<br /> }else{<br /> return;<br /> }<br /> break;<br /> case ' ':<br /> if (this._isShowingNow && this._popupWidget.getHighlightedOption())<br /> {<br /> this._announceOption(this._popupWidget.getHighlightedOption());<br /> text = this.focusNode[dojo.isIE?'innerText':'textContent'];<br /> this.focusNode[dojo.isIE?'innerText':'textContent'] = text;<br /> this.store = this.entityStore;<br /> this.clearTextValue();<br /> }<br /> else<br /> {<br /> return;<br /> }<br /> break;<br /> case dk.ESCAPE:<br /> this._prev_key_backspace = false;<br /> this._prev_key_esc = true;<br /> if(this._isShowingNow){<br /> dojo.stopEvent(evt);<br /> this._hideResultList();<br /> }else{<br /> this.inherited(arguments);<br /> }<br /> break;<br /> case dk.DELETE:<br /> case dk.BACKSPACE:<br /> if (this._isShowingNow) {<br /> this._prev_key_esc = false;<br /> this._prev_key_backspace = true;<br /> doSearch = true;<br /> }<br /> else<br /> {<br /> return;<br /> }<br /> break;<br /> case dk.RIGHT_ARROW: // fall through<br /> case dk.LEFT_ARROW:<br /> this._prev_key_backspace = false;<br /> this._prev_key_esc = false;<br /> if (!this._isShowingNow) {<br /> return;<br /> }<br /> break;<br /> case '.':<br /> var key =this.getSearchKey();<br /> if (this.subStoreMap[key])<br /> {<br /> this.store = this.subStoreMap[key];<br /> doSearch = true;<br /> }<br /> else<br /> {<br /> doSearch = false;<br /> }<br /> break;<br /> default: // non char keys (F1-F12 etc..) shouldn't open list<br /> this._prev_key_backspace = false;<br /> this._prev_key_esc = false;<br /> doSearch = typeof key == 'string';<br /> }<br /> if(this.searchTimer){<br /> clearTimeout(this.searchTimer);<br /> }<br /> if(doSearch){<br /> // need to wait a tad before start search so that the event<br /> // bubbles through DOM and we have value visible<br /> setTimeout(dojo.hitch(this, "_startSearchFromInput"),1);<br /> }<br /> },<br /> _autoCompleteText: function(/*String*/ text){<br /> // summary:<br /> // Fill in the textbox with the first item from the drop down<br /> // list, and highlight the characters that were<br /> // auto-completed. For example, if user typed "CA" and the<br /> // drop down list appeared, the textbox would be changed to<br /> // "California" and "ifornia" would be highlighted.<br /> var fn = this.focusNode;<br /> // IE7: clear selection so next highlight works all the time<br /> dijit.selectInputText(fn, fn[dojo.isIE?'innerText':'textContent'].length);<br /> // does text autoComplete the value in the textbox?<br /> var caseFilter = this.ignoreCase? 'toLowerCase' : 'substr';<br /> if(text[caseFilter](0).indexOf(this.focusNode[dojo.isIE?'innerText':'textContent'][caseFilter](0)) == 0){<br /> var cpos = this._getCaretPos(fn);<br /> // only try to extend if we added the last character at the end of the input<br /> if((cpos+1) > fn[dojo.isIE?'innerText':'textContent'].length){<br /> // only add to input node as we would overwrite Capitalisation of chars<br /> // actually, that is ok<br /> fn[dojo.isIE?'innerText':'textContent'] = text;//.substr(cpos);<br /> // visually highlight the autocompleted characters<br /> dijit.selectInputText(fn, cpos);<br /> }<br /> }else{<br /> // text does not autoComplete; replace the whole value and highlight<br /> fn[dojo.isIE?'innerText':'textContent'] = text;<br /> dijit.selectInputText(fn);<br /> }<br /> var pos = (this.leftTextValue + this.focusNode[dojo.isIE?'innerText':'textContent']).length;<br /> this.focusNode.innerHTML = (this.leftTextValue + this.focusNode[dojo.isIE?'innerText':'textContent'] + this.rigthtTextValue).split('/n').join('<BR>').split(' ').join(' ');<br /> setTimeout(dojo.hitch(this, "_setCaretPos", this.focusNode, pos),10);<br /> setTimeout(dojo.hitch(this, "highlightKeyWord"), 20);<br /> },<br /> _openResultList: function(/*Object*/ results, /*Object*/ dataObject){<br /> setTimeout(dojo.hitch(this, "highlightKeyWord"),10);<br /> if( this.disabled ||<br /> this.readOnly ||<br /> (dataObject.query[this.searchAttr] != this._lastQuery)<br /> ){<br /> return;<br /> }<br /> this._popupWidget.clearResultList();<br /> if(!results.length){<br /> this._hideResultList();<br /> return;<br /> }<br /> // Fill in the textbox with the first item from the drop down list,<br /> // and highlight the characters that were auto-completed. For<br /> // example, if user typed "CA" and the drop down list appeared, the<br /> // textbox would be changed to "California" and "ifornia" would be<br /> // highlighted.<br /> var zerothvalue = new String(this.store.getValue(results[0], this.searchAttr));<br /> if(zerothvalue && this.autoComplete && !this._prev_key_backspace &&<br /> (dataObject.query[this.searchAttr] != "*")){<br /> // when the user clicks the arrow button to show the full list,<br /> // startSearch looks for "*".<br /> // it does not make sense to autocomplete<br /> // if they are just previewing the options available.<br /> this._autoCompleteText(zerothvalue);<br /> }<br /> dataObject._maxOptions = this._maxOptions;<br /> this._popupWidget.createOptions(<br /> results,<br /> dataObject,<br /> dojo.hitch(this, "_getMenuLabelFromItem")<br /> );<br /> // show our list (only if we have content, else nothing)<br /> this._showResultList();<br /> // #4091:<br /> // tell the screen reader that the paging callback finished by<br /> // shouting the next choice<br /> if(dataObject.direction){<br /> if(1 == dataObject.direction){<br /> this._popupWidget.highlightFirstOption();<br /> }else if(-1 == dataObject.direction){<br /> this._popupWidget.highlightLastOption();<br /> }<br /> //this._announceOption(this._popupWidget.getHighlightedOption());<br /> }<br /> },<br /> _showResultList: function(){<br /> this._hideResultList();<br /> var items = this._popupWidget.getItems(),<br /> visibleCount = Math.min(items.length,this.maxListLength);<br /> // hide the tooltip<br /> //this.displayMessage("");</p> <p> // Position the list and if it's too big to fit on the screen then<br /> // size it to the maximum possible height<br /> // Our dear friend IE doesnt take max-height so we need to<br /> // calculate that on our own every time<br /> // TODO: want to redo this, see<br /> // http://trac.dojotoolkit.org/ticket/3272<br /> // and<br /> // http://trac.dojotoolkit.org/ticket/4108<br /> // natural size of the list has changed, so erase old<br /> // width/height settings, which were hardcoded in a previous<br /> // call to this function (via dojo.marginBox() call)<br /> dojo.style(this._popupWidget.domNode, {width: "", height: ""});<br /> var best = this.open();<br /> // #3212:<br /> // only set auto scroll bars if necessary prevents issues with<br /> // scroll bars appearing when they shouldn't when node is made<br /> // wider (fractional pixels cause this)<br /> var popupbox = dojo.marginBox(this._popupWidget.domNode);<br /> this._popupWidget.domNode.style.overflow =<br /> ((best.h==popupbox.h)&&(best.w==popupbox.w)) ? "hidden" : "auto";<br /> // #4134:<br /> // borrow TextArea scrollbar test so content isn't covered by<br /> // scrollbar and horizontal scrollbar doesn't appear<br /> var newwidth = best.w;<br /> if(best.h < this._popupWidget.domNode.scrollHeight){<br /> newwidth += 16;<br /> }<br /> dojo.marginBox(this._popupWidget.domNode, {<br /> h: best.h,<br /> w: Math.max(newwidth, this.domNode.offsetWidth)<br /> });<br /> //dijit.setWaiState(this.comboNode, "expanded", "true");</p> <p> if (dojo.isIE)<br /> {<br /> dijit.removeWaiState(this.focusNode, "owns");<br /> var range = document.selection.createRange();<br /> this._popupWidget.domNode.parentNode.style.left = range.offsetLeft + 'px';<br /> this._popupWidget.domNode.parentNode.style.top = (range.offsetTop + 13) + 'px';<br /> this._popupWidget.domNode.parentNode.style.width = 200;<br /> this._popupWidget.domNode.style.width = 200;<br /> }<br /> },<br /> _hideResultList: function(){<br /> if(this._isShowingNow){<br /> dijit.popup.close(this._popupWidget);<br /> this._isShowingNow=false;<br /> //dijit.setWaiState(this.comboNode, "expanded", "false");<br /> dijit.removeWaiState(this.focusNode,"activedescendant");<br /> }<br /> },</p> <p> _announceOption: function(/*Node*/ node){<br /> // summary:<br /> // a11y code that puts the highlighted option in the textbox<br /> // This way screen readers will know what is happening in the<br /> // menu<br /> this.setTextValue();<br /> if(node == null){<br /> return;<br /> }<br /> // pull the text value from the item attached to the DOM node<br /> var newValue;<br /> if( node == this._popupWidget.nextButton ||<br /> node == this._popupWidget.previousButton){<br /> newValue = node.innerHTML;<br /> }else{<br /> newValue = this.store.getValue(node.item, this.searchAttr);<br /> }<br /> // get the text that the user manually entered (cut off autocompleted text)<br /> this.focusNode[dojo.isIE?'innerText':'textContent'] = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(0, this._getCaretPos(this.focusNode));<br /> //set up ARIA activedescendant<br /> dijit.setWaiState(this.focusNode, "activedescendant", dojo.attr(node, "id"));<br /> // autocomplete the rest of the option to announce change<br /> this._autoCompleteText(newValue);<br /> },<br /> _selectOption: function(/*Event*/ evt){<br /> var tgt = null;<br /> if(!evt){<br /> evt ={ target: this._popupWidget.getHighlightedOption()};<br /> }<br /> // what if nothing is highlighted yet?<br /> if(!evt.target){<br /> // handle autocompletion where the the user has hit ENTER or TAB<br /> this.attr('displayedValue', this.attr('displayedValue'));<br /> return;<br /> // otherwise the user has accepted the autocompleted value<br /> }else{<br /> tgt = evt.target;<br /> }<br /> if(!evt.noHide){<br /> this._hideResultList();<br /> this._setCaretPos(this.focusNode, this.store.getValue(tgt.item, this.searchAttr).length);<br /> }<br /> this._doSelect(tgt);<br /> },<br /> _doSelect: function(tgt){<br /> this.item = tgt.item;<br /> this.attr('value', this.store.getValue(tgt.item, this.searchAttr));<br /> },</p> <p> _startSearchFromInput: function(){<br /> this._startSearch(this.focusNode[dojo.isIE?'innerText':'textContent']);<br /> },<br /> _getQueryString: function(/*String*/ text){<br /> return dojo.string.substitute(this.queryExpr, [text]);<br /> },<br /> _startSearch: function(/*String*/ key){<br /> var index = this.getWordBeginIndex();<br /> key = key.substring(0, this._getCaretPos(this.focusNode));<br /> key = dojo.trim(key.substring(index + 1, key.length));<br /> if(!this._popupWidget){<br /> var popupId = this.id + "_popup";<br /> this._popupWidget = new dijit.form._ComboBoxMenu({<br /> onChange: dojo.hitch(this, this._selectOption),<br /> id:popupId<br /> });<br /> this.connect(this._popupWidget, '_onMouseUp', function(event){<br /> this.focusNode.innerHTML = (this.leftTextValue + this.value + this.rigthtTextValue).split('/n').join('<BR>');<br /> this.clearTextValue();<br /> this.store = this.entityStore;<br /> });<br /> this.connect(this._popupWidget, '_onMouseDown', function(event){<br /> this.setTextValue();<br /> });<br /> dijit.removeWaiState(this.focusNode,"activedescendant");<br /> dijit.setWaiState(this.textbox,"owns",popupId); // associate popup with textbox<br /> }<br /> // create a new query to prevent accidentally querying for a hidden<br /> // value from FilteringSelect's keyField<br /> this.item = null; // #4872<br /> var query = dojo.clone(this.query); // #5970<br /> this._lastInput = key; // Store exactly what was entered by the user.<br /> this._lastQuery = query[this.searchAttr] = this._getQueryString(key);<br /> // #5970: set _lastQuery, *then* start the timeout<br /> // otherwise, if the user types and the last query returns before the timeout,<br /> // _lastQuery won't be set and their input gets rewritten<br /> this.searchTimer=setTimeout(dojo.hitch(this, function(query, _this){<br /> var fetch = {<br /> queryOptions: {<br /> ignoreCase: this.ignoreCase,<br /> deep: true<br /> },<br /> query: query,<br /> onBegin: dojo.hitch(this, "_setMaxOptions"),<br /> onComplete: dojo.hitch(this, "_openResultList"),<br /> onError: function(errText){<br /> console.error('dijit.form.ComboBox: ' + errText);<br /> dojo.hitch(_this, "_hideResultList")();<br /> },<br /> start:0,<br /> count:this.pageSize<br /> };<br /> dojo.mixin(fetch, _this.fetchProperties);<br /> var dataObject = _this.store.fetch(fetch);<br /> var nextSearch = function(dataObject, direction){<br /> dataObject.start += dataObject.count*direction;<br /> // #4091:<br /> // tell callback the direction of the paging so the screen<br /> // reader knows which menu option to shout<br /> dataObject.direction = direction;<br /> this.store.fetch(dataObject);<br /> };<br /> this._nextSearch = this._popupWidget.onPage = dojo.hitch(this, nextSearch, dataObject);<br /> }, query, this), this.searchDelay);<br /> },<br /> _setMaxOptions: function(size, request){<br /> this._maxOptions = size;<br /> },<br /> _getValueField:function(){<br /> return this.searchAttr;<br /> },</p> <p> // FIXME:<br /> // this is public so we can't remove until 2.0, but the name<br /> // SHOULD be "compositionEnd"<br /> compositionend: function(/*Event*/ evt){<br /> // summary:<br /> // When inputting characters using an input method, such as<br /> // Asian languages, it will generate this event instead of<br /> // onKeyDown event Note: this event is only triggered in FF<br /> // (not in IE)<br /> this._onKeyPress({charCode:-1});<br /> },<br /> //////////// INITIALIZATION METHODS ///////////////////////////////////////<br /> constructor: function(){<br /> this.query={};<br /> this.fetchProperties={};<br /> },<br /> postMixInProperties: function(){<br /> this.store = this.entityStore;<br /> if(!this.hasDownArrow){<br /> this.baseClass = "dijitTextBox";<br /> }<br /> if(!this.store){<br /> var srcNodeRef = this.srcNodeRef;<br /> // if user didn't specify store, then assume there are option tags<br /> this.store = new dijit.form._ComboBoxDataStore(srcNodeRef);<br /> // if there is no value set and there is an option list, set<br /> // the value to the first value to be consistent with native<br /> // Select<br /> // Firefox and Safari set value<br /> // IE6 and Opera set selectedIndex, which is automatically set<br /> // by the selected attribute of an option tag<br /> // IE6 does not set value, Opera sets value = selectedIndex<br /> if( !this.value || (<br /> (typeof srcNodeRef.selectedIndex == "number") &&<br /> srcNodeRef.selectedIndex.toString() === this.value)<br /> ){<br /> var item = this.store.fetchSelectedItem();<br /> if(item){<br /> this.value = this.store.getValue(item, this._getValueField());<br /> }<br /> }<br /> }<br /> },</p> <p> uninitialize:function(){<br /> if(this._popupWidget){<br /> this._hideResultList();<br /> this._popupWidget.destroy();<br /> }<br /> },<br /> _getMenuLabelFromItem:function(/*Item*/ item){<br /> var label = this.store.getValue(item, this.labelAttr || this.searchAttr);<br /> var labelType = this.labelType;<br /> // If labelType is not "text" we don't want to screw any markup ot whatever.<br /> if (this.highlightMatch!="none" && this.labelType=="text" && this._lastInput){<br /> label = this.doHighlight(label, this._escapeHtml(this._lastInput));<br /> labelType = "html";<br /> }<br /> return {html: labelType=="html", label: label};<br /> },</p> <p> doHighlight:function(/*String*/label, /*String*/find){<br /> // summary:<br /> // Highlights the string entered by the user in the menu, by default this<br /> // highlights the first occurence found. Override this method<br /> // to implement your custom highlighing.<br /> // Add greedy when this.highlightMatch=="all"<br /> var modifiers = "i"+(this.highlightMatch=="all"?"g":"");<br /> var escapedLabel = this._escapeHtml(label);<br /> var ret = escapedLabel.replace(new RegExp("^("+ find +")", modifiers),<br /> '<span class="dijitComboBoxHighlightMatch">$1</span>');<br /> if (escapedLabel==ret){ // Nothing replaced, try to replace at word boundaries.<br /> ret = escapedLabel.replace(new RegExp(" ("+ find +")", modifiers),<br /> ' <span class="dijitComboBoxHighlightMatch">$1</span>');<br /> }<br /> return ret;// returns String, (almost) valid HTML (entities encoded)<br /> },</p> <p> _escapeHtml:function(/*string*/str){<br /> // TODO Should become dojo.html.entities(), when exists use instead<br /> // summary:<br /> // Adds escape sequences for special characters in XML: &<>"'<br /> str = String(str).replace(/&/gm, "&").replace(/</gm, "<")<br /> .replace(/>/gm, ">").replace(/"/gm, """);<br /> return str; // string<br /> },<br /> open:function(){<br /> this._isShowingNow=true;<br /> return dijit.popup.open({<br /> popup: this._popupWidget,<br /> around: this.domNode,<br /> parent: this<br /> });<br /> },</p> <p> reset:function(){<br /> // summary:<br /> // Additionally reset the .item (to clean up).<br /> this.item = null;<br /> this.inherited(arguments);<br /> },<br /> getSearchKey: function()<br /> {<br /> var pos = this._getCaretPos(this.focusNode);<br /> var key = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(0, pos);<br /> var index = this.getWordBeginIndex(key);<br /> key = dojo.trim(key.substring(index + 1, key.length));<br /> return key;<br /> },</p> <p> setTextValue: function()<br /> {<br /> var pos = this._getCaretPos(this.focusNode);<br /> this.leftTextValue = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(0, pos);<br /> this.leftTextValue = this.leftTextValue.substr(0,this.getWordBeginIndex(this.leftTextValue) + 1);<br /> this.rigthtTextValue = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(pos, this.focusNode[dojo.isIE?'innerText':'textContent'].length);<br /> },</p> <p> clearTextValue: function()<br /> {<br /> this.leftTextValue = '';<br /> this.rigthtTextValue = '';<br /> },</p> <p> getWordBeginIndex: function(text)<br /> {<br /> var lastIndexArray = [];<br /> if (!text) text = this.focusNode[dojo.isIE?'innerText':'textContent'].substring(0, this._getCaretPos(this.focusNode));<br /> dojo.forEach(this.keyWords.concat(this.noliterWords), function(x)<br /> {<br /> lastIndexArray.push(text.toLowerCase().lastIndexOf(x));<br /> });<br /> lastIndexArray.sort(function(a,b)<br /> {<br /> return b - a;<br /> });<br /> return lastIndexArray[0];<br /> },</p> <p> highlightKeyWord: function()<br /> {<br /> //Only for IE<br /> var textContent = this.focusNode[dojo.isIE?'innerText':'textContent'];<br /> var begin = 0, oneword;<br /> for (var i = 0; i < textContent.length; i++)<br /> {<br /> if (dojo.indexOf(this.noliterWords, textContent.substring(i,i + 1)) > -1)<br /> {<br /> oneword = textContent.substring(begin, i + 1);<br /> if (dojo.indexOf(this.keyWords, dojo.trim(oneword)) > -1)<br /> {<br /> this._boldWord(this.focusNode, begin, i + 1);<br /> }<br /> begin = i;<br /> }<br /> }<br /> oneword = textContent.substring(begin,i + 1);<br /> if (dojo.indexOf(this.keyWords, dojo.trim(oneword)) > -1)<br /> {<br /> this._boldWord(this.focusNode, begin, i + 1);<br /> }<br /> },</p> <p> _boldWord: function(element, begin, end)<br /> {<br /> if (dojo.doc.body.createTextRange) {<br /> var range = dojo.doc.body.createTextRange();<br /> range.moveToElementText(element);<br /> var line1 = element.innerText.substring(0, begin).split('/n').length - 1;<br /> var line2 = element.innerText.substring(end, element.innerText.length).split('/n').length - 1;<br /> range.moveEnd('character', end - element.innerText.length + line2);<br /> range.moveStart('character', begin - line1);<br /> if (!range.queryCommandState('bold')) {<br /> range.execCommand('bold', false, null);<br /> range.execCommand('forecolor', false, this.highlightColor);<br /> }<br /> }<br /> },</p> <p> getValue: function()<br /> {<br /> return this.focusNode[dojo.isIE?'innerText':'textContent'];<br /> }<br /> }<br /> );

这个JS放置于dojo/dijit/form目录下

测试HTML为,读者使用的时候注意修改相对路径

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><br /> <html><br /> <head><br /> <mce:style type="text/css"><!--<br /> @import "../../../dojo/resources/dojo.css";<br /> @import "../css/dijitTests.css";<br /> --></mce:style><style type="text/css" mce_bogus="1"> @import "../../../dojo/resources/dojo.css";<br /> @import "../css/dijitTests.css";</style><br /> <!-- required: the default dijit theme: --><br /> <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css" mce_href="dijit/themes/tundra/tundra.css"><br /> <mce:script type="text/javascript" src="../../../dojo/dojo.js" mce_src="dojo/dojo.js"<br /> djConfig="isDebug: true, parseOnLoad: true"></mce:script></p> <p><mce:script type="text/javascript"><!--</p> <p> dojo.require("dijit.form.AutoCompleteEditor");<br /> dojo.require("dojo.data.ItemFileReadStore");<br /> var entityData =<br /> {<br /> identifier: "type",<br /> label: "name",<br /> items: [{<br /> name: "Customer",<br /> label: "Customer",<br /> type: "0"<br /> }, {<br /> name: "Event",<br /> label: "Event",<br /> type: "1"<br /> },<br /> {<br /> name: "GetString",<br /> label: "GetString",<br /> type: "2"<br /> }]<br /> }<br /> entityDataStore = new dojo.data.ItemFileReadStore({data: entityData});<br /> entityDataStoreMap = [];<br /> entityData =<br /> {<br /> identifier: "type",<br /> label: "name",<br /> items: [{<br /> name: "BirthDay",<br /> label: "BirthDay",<br /> type: "0"<br /> }, {<br /> name: "Gender",<br /> label: "Gender",<br /> type: "1"<br /> }]<br /> }<br /> entityDataStoreMap['Customer'] = new dojo.data.ItemFileReadStore({data: entityData});<br /> entityData =<br /> {<br /> identifier: "type",<br /> label: "name",<br /> items: [{<br /> name: "Voice",<br /> label: "Voice",<br /> type: "0"<br /> }, {<br /> name: "GPRS",<br /> label: "GPRS",<br /> type: "1"<br /> }]<br /> }<br /> entityDataStoreMap['Event'] = new dojo.data.ItemFileReadStore({data: entityData});<br /> entityData =<br /> {<br /> identifier: "type",<br /> label: "name",<br /> items: [{<br /> name: "GetString",<br /> label: "GetString",<br /> type: "0"<br /> }]<br /> }<br /> entityDataStoreMap['Function'] = new dojo.data.ItemFileReadStore({data: entityData});</p> <p> keyWords = ['and', 'or', 'if', 'else'];<br /> dojo.addOnLoad(function(){dijit.byId('test').keyWords = keyWords;});<br /> // --></mce:script><br /> </head><br /> <body class="tundra"><br /> <div style="padding:10px 10px 0 10px" mce_style="padding:10px 10px 0 10px" ><br /> </div><br /> <h1 id="towDialog">Test dijit.form.AutoCompleteEditor</h1><br /> <div id="test" dojoType="dijit.form.AutoCompleteEditor" entityStore="entityDataStore" subStoreMap="entityDataStoreMap"></div><br /> <INPUT type=button onclick="alert(dijit.byId('test').getValue())" value="getValue"/><br /> </body><br /> </html> 

其中一级对象为Customer,Event和GetString,Customer包含BirthDay和Gender两个属性 Event包含Voice和GPRS两个属性

关键字为[if, else,and,or]

效果图如下