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

发布于 2024-11-09 13:39:44 字数 1741 浏览 0 评论 0原文

我想实现一个建议组合框，它显示从我自己的网络服务（使用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>

原文

I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南汐寒笙箫 2024-11-16 13:39:44

你期待这个吗

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

Are you expecting this

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

回复收藏 0 原文

~没有更多了~