Лучший способ отобразить предложения в ComboBox додзё - PullRequest
Новая
       25

Лучший способ отобразить предложения в ComboBox додзё

0 голосов
/ 23 мая 2011

Я хочу реализовать комбинированный список предложений, который показывает предложения, взятые из моего собственного веб-сервиса (с помощью 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>

1 Ответ

1 голос
/ 25 мая 2011

Вы ожидаете этого 

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