Làm cách nào để tự động điền thẻ đầu vào html trong Ext.js?

Question

Nếu bạn đang sử dụng thư viện Ext.js, làm cách nào để tự động điền trong các vùng văn bản nhập?

Chính xác hơn, làm cách nào để tự động điền dựa trên các yêu cầu Ajax lặp lại (như jQuery autocomplete plugin trong đó tùy chọn Ajax được đặt thành url cập nhật).

Suy nghĩ được đánh giá cao và cảm ơn bạn đã đọc.

Answer 1

Kể từ bmoueskau cung cấp một tính năng thực hiện khá đầy đủ, tôi nghĩ một bare-bones dụ hơn có thể giúp đỡ.

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. 
}); 

Các cửa hàng sẽ chấp nhận phản hồi từ máy chủ của bạn được định dạng như thế này:

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

Tất nhiên, bạn cũng có thể thiết lập cửa hàng của bạn với một Ext.data.XMLReader nếu đó là phong cách của bạn hơn.

Tôi hy vọng điều đó giúp bạn bắt đầu. Tôi không thể nhấn mạnh đủ sự khiếp sợ của Ext documentation. Nó có một số ví dụ thích hợp ngoài các combobox samples, mà tôi sử dụng rất nhiều khi lần đầu tiên tôi thực hiện một số autocompleters.

Answer 2

Không có chức năng tự động hoàn thành riêng biệt có thể được gắn chung với đầu vào - bạn chỉ cần sử dụng điều khiển ComboBox với lọc phía máy chủ (bạn có thể sử dụng cấu hình "hideTrigger: true" để nó trông giống như một đồng bằng đầu vào). Đây có lẽ là ví dụ gần nhất với những gì bạn muốn:

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