Как можно сделать автозаполнение HTML-тега ввода в Ext.js? - PullRequest
Новая
       26

Как можно сделать автозаполнение HTML-тега ввода в Ext.js?

8 голосов
/ 21 августа 2009

Если вы используете библиотеку Ext.js, как можно выполнить автозаполнение в области ввода текста?

Точнее, как можно выполнять автозаполнение на основе итеративных запросов Ajax (например, плагин автозаполнения jQuery , где для параметра Ajax задан URL-адрес обновления).

Мысли ценим и спасибо за чтение.

Ответы [ 2 ]

13 голосов
/ 26 августа 2009

Поскольку 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 . У него есть несколько подходящих примеров в дополнение к образцам со списком , которые я интенсивно использовал, когда впервые сделал несколько автозаполнений.

6 голосов
/ 21 августа 2009

Нет отдельной функции автозаполнения, которая может быть привязана к входным данным - вы бы просто использовали элемент управления ComboBox с фильтрацией на стороне сервера (вы можете использовать конфигурацию «hideTrigger: true», чтобы она по-прежнему выглядела как обычный ввод) ). Это, вероятно, самый близкий пример того, что вы хотите:

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

...