Question

我想实现一个建议组合框，它显示从我自己的Web服务中获取的建议（使用restapi和jsonp）。我发现ComboBox.store.root.children包含建议的数据并编写了下面的代码。为了简单起见，我使用数组而不是从我的服务中获取建议。问题是它看起来像一个黑客，一些功能无法正常工作。例如，我无法摆脱列表中的“搜索”短语。你能建议更优雅的解决方案吗？

<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>

Answer 1

你期待这个吗？

<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>

在dojo的ComboBox中显示建议的更好方法

1 个答案: