Заметки Вебмастера

Познаём Новые Технологии

ajax поиск в chosen

Chosen. Использование ajax поиска. Autocomplete

Заметка описывает пример реализации ajax поиска с использованием плагина Chosen.

Задача:

Реализовать ajax поиск в выпадающем списке Chosen

Пример решения:

Подключаем плагин Chosen к необходимому элементу и осуществляем поиск с помощью autocomplete

Ссылка на документацию autocomplete

MySelect.chosen();
$('.chosen-search input').autocomplete({
    source: function( request, response ) {
        $search_param = $('.chosen-search input').val();
        var data = {
            search_param: $search_param
        };
        if($search_param.length>3) { //отправлять поисковой запрос к базе, если введено более трёх символов
            $.post('my_search.php', data, function onAjaxSuccess(data) {
                if((data.length!='0')) {
                    $('ul.chosen-results').find('li').each(function () {
                        $(this).remove();//отчищаем выпадающий список перед новым поиском
                    });
                    $('select').find('option').each(function () {
                        $(this).remove(); //отчищаем поля перед новым поисков
                    });
                }
                    for (var id in data) {
                        MySelect.append('<option value="' + data[id] + '">' + data['name'] + ' ' + data['last_name'] + ' ( ' + data['email'] + ' )</option>');
                    }
                    MySelect.trigger("chosen:updated");
                    $('.chosen-search input').val($search_param);
                    anSelected = MySelect.val();
            });
        }
    }

});

Файл my_search.php принимает переменную search_param и осуществляет по ней поиск, возвращая ответ в data.

Для осуществления поиска рекомендую выставить ограничение по длине поисковой переменной, например, начинать поиск, если длина поискового слова больше трёх символов. Для регулирования этого значения необходимо исправить строку

if($search_param.length>3) {

, , , ,

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

 

Ваш e-mail не будет опубликован. Обязательные поля помечены *