Autocomplete

Виджет позволяет производить фильтрацию и выбор значения как из локального, так и удаленного источника данных.

Инициализация

Для инициализации виджета запустите функцию конструктор autocomplete.
                            
rc.autocomplete({
    pageX: e.pageX,
    pageY: e.pageY,
});
                            
                        

Формат данных

Значения источников данных должны поддерживать следующий интерфейс типа ключ-значение:
                    
{
    Id: 1,
    Text: 'Значение'
}
                    
                

Возвращамые данные

При закрытии, при наличии таковой, виджет вызывает пользовательскую функцию обратного вызова куда передает коллекцию выбранных значений.
                            
rc.autocomplete({
    pageX: e.pageX,
    pageY: e.pageY,
    found: [
        {
            Id: 4,
            Text: '4 значение'
        },
        {
            Id: 3,
            Text: '3 значение'
        },
        {
            Id: 2,
            Text: '2 значение'
        },
        {
            Id: 1,
            Text: '1 значение'
        }
    ],
}, values => {
    if (values && values.length) {
        const sel = 'Выбрано: ' + values.map(value => value.Text).join(', ');
        $.notify(sel, { position:"top center", className: 'success' });
    }
});
                            
                        

Поиск в локальном источнике данных

При добавлении в параметризующий объект свойства found, содержащего коллекцию значений среди которых будет осуществляться поиск
                            
rc.autocomplete({
    pageX: e.pageX,
    pageY: e.pageY,
    found: [
        {
            Id: 4,
            Text: '4 значение'
        },
        {
            Id: 3,
            Text: '3 значение'
        },
        {
            Id: 2,
            Text: '2 значение'
        },
        {
            Id: 1,
            Text: '1 значение'
        }
    ],
});
                            
                        

Предустановка выбранных значений

Предустановка выбранных значений возможна при добавлении в параметризующий объект свойства values.
                            
rc.autocomplete({
    pageX: e.pageX,
    pageY: e.pageY,
    found: [
        {
            Id: 4,
            Text: '4 значение'
        },
        {
            Id: 3,
            Text: '3 значение'
        },
        {
            Id: 2,
            Text: '2 значение'
        },
        {
            Id: 1,
            Text: '1 значение'
        }
    ],
    values: [
        {
            Id: 1,
            Text: '1 значение'
        }
    ]
});
                            
                        

Поиск значений в удаленном источнике

Для конфинурирования запроса виджет предоставляет слкдующие параметры:
Параметр Описание
url задает адрес удаленного источника данных
method тип запроса (по умолчание используется GET)
clientSearch в случае установки флага поиск будет осуществляться в коллекции found без выполнения запроса
getAjaxData Пользовательская (синхронная) функция получения данных
onAjaxSuccess Пользовательский обработчик данных
API удаленного источника должно поддерживать интерфейс с параметром searchStr, например для GET:
                    
https://some.api/get?searchStr=tofind
                    
                
                            
rc.autocomplete({
    pageX: e.pageX,
    pageY: e.pageY,
    method: 'GET',
    url: 'https://cdn.rawgit.com/dpheitmeyer/e0c4480fe583663c51de/raw/8e19ab1765dc27b6eeeb480f0187f3fd5a6db6a9/seasons.json',
    clientSearch: false,
    getAjaxData: params => {
        const dummyData = ['один', 'два', 'три', 'город', 'улица'];

        for (let i = dummyData.length - 1; i >= 0; i--){
            for (let j = 0; j < params.values.length; j++){
                if(dummyData[i] && (dummyData[i] === params.values[j].Text)){
                    dummyData.splice(i, 1);
                }
            }
        }

        return dummyData.filter(item => item.indexOf(params.searchStr.toLowerCase()) !== -1);
    },
    onAjaxSuccess: result => {
        return result.map(item => {
            return {
                Id: parseInt(Math.random() * 1000),
                Text: item
            }
        });
    }
});
                            
                        

Ограничение количества выбранных значений

Возможно ограничить кол-во выбранных значений используя параметр maxValuesCount
                            
rc.autocomplete({
    pageX: e.pageX,
    pageY: e.pageY,
    found: [
        {
            Id: 4,
            Text: '4 значение'
        },
        {
            Id: 3,
            Text: '3 значение'
        },
        {
            Id: 2,
            Text: '2 значение'
        },
        {
            Id: 1,
            Text: '1 значение'
        }
    ],
    maxValuesCount: 2
});
                            
                        
Made on
Tilda