在dojo的ComboBox中顯示建議的更好方法

我想實現一個建議組合框，它顯示了從我自己的web服務（使用restapi和jsonp）獲取的建議。我發現ComboBox.store.root.children包含建議的數據並編寫下面的代碼。爲了簡單起見，我使用數組而不是從我的服務獲取建議。與它的問題是它看起來像一個黑客和一些功能無法正常工作。例如，我無法擺脫列表中的「搜索」短語。你能提出更優雅的解決方案嗎？在dojo的ComboBox中顯示建議的更好方法

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

來源

2011-05-23 Kirill Lykov

你期待這

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

來源

2011-05-25 06:11:21 rajkamal

號這不是我所需要的，因爲我寫的，我下載從我的web服務的建議，因此我不將它們存儲在一個文件中。 – 2011-05-25 11:17:09

我不確定restapi，jsonp條款。但我的猜測是，即使從restapi或jsonp獲取數據 - 從這些數據源獲取數據後，將這些數據放入ItemFileWriteStore並在組合框中調用啓動。對不起，如果我錯了。 – rajkamal 2011-05-26 05:36:14

在dojo的ComboBox中顯示建議的更好方法

回答

相關問題