我想在dojo中创建一个组合框,其中下拉菜单和自动完成仅在用户输入3个字符后启动。当前默认设置将开始显示下拉菜单,并在用户输入第一个字符时自动完成。
是否有任何获取此行为的属性?我能超载一些功能吗?或者我应该自己编写一个单独的小部件吗?
答案 0 :(得分:1)
我可以指出正确的方向:在此处导航到API页面:http://dojotoolkit.org/api/
并查找dojox.validate.isText.
可以设置一个minlength
标志,返回一个布尔值。或者,您可以使用正则表达式:`dojox.validate.regexp
,可以在同一页面上找到。这是使用minlength标志的示例。这不是最优雅的解决方案(如果comboBox具有启用/禁用的autoComplete约束也会更好),但它说明了如何为dojo小部件设置属性。
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css"media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"type="text/javascript" ></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.store.Memory");
dojo.require("dojox.validate._base");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.Button");
var myBox, myForm, myButton, mainStore, altStore, test;
test = false;
dojo.ready(function(){
buildForm();
});
function buildForm(){
//use this store for your data
mainStore = new dojo.store.Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
//bind comboBox to an empty store until validation criteria met
altStore = new dojo.store.Memory({
data: []
});
//the comboBox needs to be contained in a form to work
myForm = new dijit.form.Form({
encType: 'multipart/form-data',
onSubmit: function(e){if(!myForm.validate())dojo.stopEvent(e);}
}, dojo.doc.createElement('div'));
//programmatically create the combobox
myBox = new dijit.form.ComboBox({
id: "myComboBox",
name: "state",
store: altStore,
searchAttr:"name"
});
myButton = new dijit.form.Button({
id: "comboBoxButton",
label: "get value",
onClick: function(){alert(dijit.byId('myComboBox').get('value'));}
});
//attach dijit elements the form and the form to the webpage
myForm.domNode.appendChild(myBox.domNode);
myForm.domNode.appendChild(myButton.domNode);
dojo.byId("myDiv").appendChild(myForm.domNode);
//event listener to check comboBox for minimum text length
myBox.on("KeyPress", function(){
test = dojox.validate.isText(dojo.byId("myComboBox").value, {minlength: 2});
if (test){
myBox.store = mainStore;
}
if(!test){
myBox.store = altStore;
}
});
}
</script>
</head>
<body>
<div id="myDiv" class="tundra" ></div>
</body>