dojo控件FilteringSelect的使用经历

大佬教程收集整理的这篇文章主要介绍了dojo控件FilteringSelect的使用经历，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

最近在用dojo做一个项目的前台。版本是1.2.3，期间使用到了FilteringSELEct这个下拉菜单控件。这个控件的功能不错，即可以像传统的SELEct标签一样下拉选择，还可以让用户直接输入进行逐字搜索匹配。不过，东西毕竟是老外做的，使用时还是到了一些水土不服的问题，这些问题在网上搜过，但都没什么结果。现在有些问题解决了，有些没有很完美的解决。现在拿出来和大家一起分享和讨论一下。

问题1：FilteringSELEct和ComboBox控件中文显示问题

发现FilteringSELEct选定选项后，英文可以正常显示在控件中间，但中文有明显的上移，字体上面一小部分被遮盖，下面有较大的空隙。我想应该是dojo的css样式设定问题，于是找到了dijit/themes/dijit.css文件。其中有一段定义ComboBox文本框样式的

.dijitText<a href="http://code.js-code.com/tag/Box/" target="_blank" class="keywords">Box</a> INPUT,.dijitCombo<a href="http://code.js-code.com/tag/Box/" target="_blank" class="keywords">Box</a> INPUT,.dijitSpinner INPUT <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> border-left: solid black 1px; display:inline; position:static !important; border:0 !important; margin:0 !important; vertical-align:top!important; visibility:visible !important; <a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>kground-color:transparent !important; <a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>kground-image:none !important; width<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">:1</a>00% !important; }

其中vertical-align这项默认竟然是top，现改为middle后，中文显示正常。

问题2: 在FilteringSELEct中输入文字时，控件默认是按照从第一个字开始匹配的。现想对 可选项根据 输入的字进行包含式模糊查询的功能

之前查看了FilteringSELEct的API，发现有个queryExpr的属性，根据说明

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"

这个*${0}*应该就是我们想要的包含查询了。于是将queryExpr=“ *${0}* ”属性加入到 FilteringSELEct得input标签里。但发现这样声明并不起作用，无奈之下，翻了下ComboBox.js的源码，在其中发现了queryExpr属性初始化的位置如下

// labelType: <a href="http://code.js-code.com/tag/Stri/" target="_blank" class="keywords">Stri</a>ng //"html" or "text" labelType: "text",// queryExpr: <a href="http://code.js-code.com/tag/Stri/" target="_blank" class="keywords">Stri</a>ng // dojo.data query expression pattern. // `$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>0}` will be substituted for the user text. // `*` is used for wildcard<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a> // `$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>0}*` means "starts with",`*$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>0}*` means "contains",`$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>0}` means "is" queryExpr: "$<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a>0}*" // ignoreCase: <a href="http://code.js-code.com/tag/Boole/" target="_blank" class="keywords">Boole</a>an ignoreCase: true,

无奈下，在代码中直接将queryExpr的初始值改为 "*${0}*" ，问题解决。

问题3：在 FilteringSELEct输入中文后不像输入英文或数字一样自动进行搜索匹配，只能敲了空格再敲回退键的时候才触发显示提示选项

这个问题比较头疼。继续翻ComboBox的源码，找到ComboBox文本框处理按键事件的函数，如下

_onKeyPress: function(/*Event*/ evt)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // sum<a href="http://code.js-code.com/tag/Mary/" target="_blank" class="keywords">Mary</a>: handles keyboard events var key = evt.charOrCode; //except for cut<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g/pas<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g case - ctrl + x/v if(evt.altKey || (evt.ctrlKey && (key <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">!=</a> 'x' && key <a href="http://code.js-code.com/tag/" target="_blank" class="keywords">!=</a> 'v')) || evt.key == dojo.key<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>SHIFT)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> return; // throw out weird key combinations and spur<a href="http://code.js-code.com/tag/IoU/" target="_blank" class="keywords">IoU</a>s events } var doSearch = <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se; var pw = thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_popupWidget; var dk = dojo.keys; if(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_isShowing<a href="http://code.js-code.com/tag/Now/" target="_blank" class="keywords">Now</a>)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> pw.handleKey(key<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } switch(key)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> case dk.PAGE_DOWN: case dk.DOWN_ARROW: if(!thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_isShowing<a href="http://code.js-code.com/tag/Now/" target="_blank" class="keywords">Now</a>||thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_prev_key_es<a href="http://code.js-code.com/tag/C/" target="_blank" class="keywords">C)</a><a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_arrowPressed(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> doSearch=true; }else<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_<a href="http://code.js-code.com/tag/Ann/" target="_blank" class="keywords">Ann</a>ounceOption(pw.getHighlighte<a href="http://code.js-code.com/tag/dop/" target="_blank" class="keywords">dop</a>tion()<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } dojo.stopEvent(evt<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_prev_key_<a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>kspace = <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se; thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_prev_key_esc = <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se; break; case dk.PAGE_UP: case dk.UP_ARROW: if(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_isShowing<a href="http://code.js-code.com/tag/Now/" target="_blank" class="keywords">Now</a>)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_<a href="http://code.js-code.com/tag/Ann/" target="_blank" class="keywords">Ann</a>ounceOption(pw.getHighlighte<a href="http://code.js-code.com/tag/dop/" target="_blank" class="keywords">dop</a>tion()<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } dojo.stopEvent(evt<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_prev_key_<a href="http://code.js-code.com/tag/BAC/" target="_blank" class="keywords">BAC</a>kspace = <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se; thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_prev_key_esc = <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se; break; case dk.ENTER: // prevent submit<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g form if user presses enter. Also // prevent accep<a href="http://code.js-code.com/tag/Tin/" target="_blank" class="keywords">Tin</a>g the value if either Next or Prev<a href="http://code.js-code.com/tag/IoU/" target="_blank" class="keywords">IoU</a>s // are <a href="http://code.js-code.com/tag/SELE/" target="_blank" class="keywords">SELE</a>cted var highlighted; if(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_isShowing<a href="http://code.js-code.com/tag/Now/" target="_blank" class="keywords">Now</a> && (highlighted = pw.getHighlighte<a href="http://code.js-code.com/tag/dop/" target="_blank" class="keywords">dop</a>tion()) )<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // only stop event on prev/next if(highlighted == pw.nextButton)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_nextSearch<a href="http://code.js-code.com/tag/1/" target="_blank" class="keywords">(1)</a>; dojo.stopEvent(evt<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> break; }else if(highlighted == pw.prev<a href="http://code.js-code.com/tag/IoU/" target="_blank" class="keywords">IoU</a>sButton)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_nextSearch(-1<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> dojo.stopEvent(evt<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> break; } }else<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // <a href="http://code.js-code.com/tag/updat/" target="_blank" class="keywords">updat</a>e 'value' (ex: KY) according to currently displayed text thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>_setDisplayedValueAttr(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>attr('displayedValue'),tru<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>; } // default case: // prevent submit,but allow event to bubble // 加入按下enter键后触发<a href="http://code.js-code.com/tag/sousuo/" target="_blank" class="keywords">搜索</a> doSearch = true; evt.preventDefault(<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> // <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>l through ........................................... } if(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>searchTimer)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> clearTimeout(thi<a href="http://code.js-code.com/tag/s/" target="_blank" class="keywords">s.</a>searchTimer<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } if(doSearch)<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">{</a> // need to wait a tad before start search so that the event // bubbles through DOM and we have value visible setTimeout(dojo.hitch(this,"_startSearchFromInput"),1<a href="http://code.js-code.com/tag/" target="_blank" class="keywords">);</a> } }

搜了下官网论坛，发现亚洲语言都会有这个问题，上面也没有可借鉴的解决方案，这个问题直接原因应该是中文字都是通过输入法软件进行录入的，控件文本框中无法捕捉到键盘的敲击事件导致无法触发search方法。

我目前一个变通方式就是在捕捉到enter事件后进行search，添加代码如上。用户在输入文字后按enter键进行模糊查询并显示搜索后可选项。

最后一个问题不知道有没有更好的解决方法，期待ing。

大佬总结

以上是大佬教程为你收集整理的dojo控件FilteringSelect的使用经历全部内容，希望文章能够帮你解决dojo控件FilteringSelect的使用经历所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。