问题描述
||
我想实现一个建议组合框,其中显示了从我自己的Web服务(使用restapi和jsonp)获取的建议。我发现ѭ0包含建议的数据,并在下面编写了代码。为了简单起见,我使用there数组而不是从服务中获取建议。
这样做的问题是,它看起来像黑客一样,并且某些功能无法正常运行。例如,我无法摆脱列表中的“搜索”短语。
您能提出更优雅的解决方案吗?
<head>
<style type=\"text/css\">
body,html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src=\"http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js\"
djConfig=\"parseOnLoad: true\">
</script>
<script type=\"text/javascript\">
dojo.require(\"dijit.form.ComboBox\");
</script>
<script type=\"text/javascript\">
dojo.addOnLoad(function() {
var cb = dijit.byId(\"searchQuery\");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = [\"AAA\",\"BBB\",\"CCC\"];
dojo.connect(cb,\"onKeyPress\",function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions,function(entry,i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css\"
/>
</head>
<body class=\" claro \">
<select dojoType=\"dijit.form.ComboBox\" id=\"searchQuery\" name=\"searchQuery\" class=\"sQ\">
<option>
Search
</option>
</select>
</body>
解决方法
你在期待这个吗
<html>
<head>
<link rel=\"stylesheet\" type=\"text/css\" href=\"http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css\"/>
<style type=\"text/css\">
body,html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src=\"http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js\"
djConfig=\"parseOnLoad: true\">
</script>
<script type=\"text/javascript\">
dojo.require(\"dijit.form.ComboBox\");
dojo.require(\"dojo.data.ItemFileWriteStore\");
dojo.require(\"dijit.form.Button\");
</script>
<script type=\"text/javascript\">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:\'id\',label:\'name\',items:[
{id:1,name:\'me\'},{id:2,name:\'you\'},{id:3,name:\'stackoverflow\'}
]
}
})
new dijit.form.ComboBox({
store:str,name:\"searchQuery\",onChange:function(){
alert(dojo.query(\"[name=searchQuery]\")[0].value)
}
},\"searchQueryHld\")
});
</script>
</head>
<body class=\" claro \">
<span id=\"searchQueryHld\"></span>
<span dojoType=\"dijit.form.Button\">
Add one option
<script type=\"dojo/method\" event=\"onClick\">
str.newItem({id:idg,name:\'me\'+idg})
idg++;
</script>
</span>
</body>
</html>