Kendo UI: работа с элементом управления AutoComplete

Примеры решения различных задач при работе с элементом управления AutoComplete.

Добавление значений в список подсказок

<div>
    <input id="Values" />
</div>
<div>
    <input id="NewValue" type="text" />
    <button onclick="addNewValue()">Add</button>
</div>

<script>
    var valuesCtrl = $("#Values").kendoAutoComplete({
        dataTextField: 'text',
        dataSource: [],
        filter: "startswith"
    }).data('kendoAutoComplete');

    function addNewValue() {
        var value = $('#NewValue').val();
        valuesCtrl.dataSource.add({ text: value });
    }
</script>

Основной нюанс здесь в том, что в список подсказок нельзя добавлять строковые значения — добавлять можно только объекты. При этом, с помощью параметра dataTextField необходимо указать название свойства объекта, из которого требуется брать текст подсказки.

Открытие списка подсказок при получении элементом фокуса ввода

Задача заключается в том, чтобы открыть список подсказок сразу, как только на элемент управления устанавливается фокус ввода.
Задача решается вызовом метода search.

<div>
    <input id="Values" />
</div>

<script>
    $("#Values").kendoAutoComplete({...});
    $("#Values").focus(function() {
        var ctrl = $(this).data('kendoAutoComplete');
        (ctrl.value() == null || ctrl.value().length < 1) && ctrl.search();
    });
</script>

Открытие всего списка (не применять к списку фильтр)

Если в качестве значения фильтра установить пустое значение, то откроется полный список подсказок, а не только те, что удовлетворяют условиям фильтрации.

<div>
    <input id="Values" />
</div>

<script>
    $("#Values").kendoAutoComplete({
        filtering: function(e) { e.filter.value = ''; }
    })
</script>

About the author

Добавить комментарий

Сказать спасибо

Способ платежа:

Подписаться на обновления

Укажите свой e-mail чтобы получать уведомления о новых статьях.

Присоединиться к еще 3 подписчикам