如何在Ext.js中做html輸入標記自動完成？

Question

如果您使用的是Ext.js庫，那麼在輸入文本區域中如何自動完成？

更確切地說，一個如何將基於迭代Ajax請求做自動完成（像在阿賈克斯選項設置爲一個更新的url jQuery autocomplete plugin）。

感謝您的意見，並感謝您的閱讀。

Answer 1

由於bmoueskau提供了一個相當完整功能的實現，我想到了一個更裸機例子可能會有幫助。

var store = new Ext.data.JsonStore({ 
    url: '/your/ajax/script/', 
    root: 'data', // the root of the array you'll send down 
    idProperty: 'id', 
    fields: ['id','value'] 
}); 

var combo = new Ext.form.ComboBox({ 
    store: store, 
    displayField:'value', 
    typeAhead: true, 
    mode: 'remote', 
    queryParam: 'query', //contents of the field sent to server. 
    hideTrigger: true, //hide trigger so it doesn't look like a combobox. 
    selectOnFocus:true, 
    width: 250, 
    renderTo: 'autocomplete' //the id of the html element to render to. 
           //Not necessary if this is in an Ext formPanel. 
}); 

這家商店將接受響應從服務器格式如下：

{ 
    "success": true, 
    "data": [ 
     { 
      "id": 10, 
      "value": "Automobile" 
     }, 
     { 
      "id": 24, 
      "value": "Autocomplete" 
     } 
    ] 
} 

當然，你也可以設置你的店有Ext.data.XMLReader如果這是你的風格。

我希望能讓你開始。我無法強調Ext documentation的迷人之處。除了combobox samples之外，它還有一些相關示例，當我第一次製作一些自動補全程序時，我使用了這些示例。

Answer 2

沒有單獨的自動完成功能可以一般地附加到輸入 - 您只需使用ComboBox控件進行服務器端過濾（您可以使用「hideTrigger：true」配置，使它看起來仍然像普通輸入）。這可能是最近的例子，你想要什麼：

http://extjs.com/deploy/dev/examples/form/forum-search.html