dijit.form.Select、dijit.form.ComboBox和dijit.form.FilteringSelect三者的区别

1.    展现方式

select：

<select id="s1" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s1" '><option value="TN">Tennessee</option><option value="VA" selected="selected">Virginia</option><option value="WA">Washington</option><option value="FL">Florida</option><option value="CA">California</option></select>

comboBox：

<select id="setvaluetest" data-dojo-type="<strong>dijit/form/ComboBox</strong>"data-dojo-props='name:"state1",style:{width:"50%", fontSize:"200%", fontFamily:"Courier"},autoComplete:false,selectOnClick:true,onBlur:function(){ dojo.byId("b1").value=dijit.byId("setvaluetest").value },onClick:function(){ console.log("onclick"); },pageSize:30,labelFunc:setValueTestLabelFunc,onChange:setValueTestOnChange'><option value="AL">Alabama</option>...<option value="WY">Wyoming</option></select>

FilteringSelect：

<select id="setvaluetest" data-dojo-type="<strong>dijit/form/FilteringSelect</strong>"data-dojo-props='name:"state1",style:{width:"50%", fontSize:"200%", fontFamily:"Courier"},autoComplete:false,selectOnClick:true,onBlur:function(){ dojo.byId("b1").value=dijit.byId("setvaluetest").value },onClick:function(){ console.log("onclick"); },pageSize:30,labelFunc:setValueTestLabelFunc,onChange:setValueTestOnChange'><option value="AL">Alabama</option>...<option value="WY">Wyoming</option></select>

2、功能

select：

（1）设置字体及字体颜色

（2）设置选项图标

（3）设置分组

（4）设置下拉框高度

Combobox  和  FilteringSelect：

相同功能点：

（1）自动补全：输入字母会出现提示，会自动选中搜索结果第一个匹配项。

<select data-dojo-type="dijit/form/ComboBox" data-dojo-props='store:stateStore,searchAttr:"name",name:"state2"'></select>

若不需要自动匹配搜索结果第一项，则设置：autoComplete:false。效果如下：

若不需要对搜索内容进行高亮，则设置：highlightMatch:false。效果如下：

（2）通过修改style属性可以定义选项框的宽度和字体大小等属性，这里的fontSize支持百分比。

（3）去掉输入框右侧的下拉箭头，根据输入的内容进行匹配显示。则设置：hasDownArrow:false。效果如下：

（4）控件初始化时，可以设置对数据筛选和过滤。

（5）数据分页显示

（6）设置选项展现的样式

例如：把显示项都转为小写展示

JS:

function myLabelFunc(item, store) {var label = store.getValue(item, 'name');// DEMO: uncomment to chop off a character//label=label.substr(0, label.length-1);// DEMO: uncomment to set to lower caselabel = label.toLowerCase();return label;}

HTML:

（7）Combobox占位提示

（8）搜索匹配项区分大小写

例如：设置一个下拉框有4个选项

输入“a”后，匹配的选择项为4个：

设置组件ignoreCase属性为false后，输入“a”后，匹配的选择项只有2个：

不同点：

（1）通过get("value") 获取控件值，ComboBox 获取到的值是：控件显示值，FilteringSelect 获取到的值是：id 字段的值 /option标签中value属性的值

（2）如果文本框中输入的值，在下拉列表中没有对应的匹配项。FilteringSelect 会输入的数据进行校验，则会给出错误提醒。ComboBox 不会对输入的数据进行校验。