Как реализовать множественный выбор в jQuery UI Autocomplete (а-ля чекбоксы)?

Question

[kulikoff]

В проекте есть реализация выбора через UI Autocomplete.

Требуется сделать множественный выбор, чтобы при клике на нужный вариант список не закрывался, а просто помечался выбранный вариант и можно было выбрать еще.

Кто-то сталкивался? Это возможно? Или надо переделывать реализацию?

Answer 1

[Петр]

Так напишите свой, минут 30 на реализацию

function OnAutoCompleteTimeEvent(){
    window.MyAccountInputHandle = 0;
    var inpnat = window.MyAccountInput;
    var inp = $(inpnat);
    var txt = inp.val();
    if (txt.length >= 3){
        var fn = function(data){
            var drop = $('#input_drop_area');
            drop.empty();
            $.each(data, function(idx, value){ $('<li />').html(value).appendTo(drop); });
            ShowAutoCompleteBlock(drop, data.length);
            if (data.length){
                drop.data('input', inpnat);
                var xy = inp.offset();
                drop.offset({ left: xy.left, top: xy.top + inp.outerHeight() });
                drop.width(inp.outerWidth());
            }
        };
        $.getJSON(inp.attr('auto-complete-ex'), { q: txt }, fn);
    }
}
function OnKeyUpForAutoComplete(){
    if (window.MyAccountInputHandle){
        clearTimeout(window.MyAccountInputHandle);
        window.MyAccountInputHandle = 0;
    }
    window.MyAccountInputHandle = setTimeout(OnAutoCompleteTimeEvent, 600);
    window.MyAccountInput = this;
}
function OnSelectAutoCompleteItem(){
    var li = $(this);
    var ul = li.closest('ul');
    var inp = $(ul.data('input'));
    inp.val(li.text());
    ul.hide();
}
$(function(){
    var usac = $('#user-account');
    usac.on('keyup', 'input[auto-complete-ex]', OnKeyUpForAutoComplete);
});

<ul id="input_drop_area" style="display:none;"></ul>

#input_drop_area{
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding-left: 0;
    margin: 0;
}
#input_drop_area li{
    padding: 5px;
    cursor: pointer;
}
#input_drop_area li:hover{
    background-color: #cecece;
}

Comments

[kulikoff]

Прежде чем писать свой - надо удостовериться, что нельзя это реализовать в существующем решении.