jqueryui автозаполнение ограничить несколько вариантов выбора - PullRequest
Новая
       12

jqueryui автозаполнение ограничить несколько вариантов выбора

2 голосов
/ 27 января 2011

Я использую автозаполнение пользовательского интерфейса jQuery и пытаюсь ограничить несколько результатов. В основном я строю систему PM, я использую автозаполнение для поля to. Но я пытаюсь ограничить количество людей, которым можно отправить одно сообщение. Так что, как ограничить максимальный выбор до 25.

Есть ли способ ограничить это? Также есть идеи по визуальному показателю того, что они достигли максимума? 

 select: function( event, ui){
    var terms = split( this.value );
    if(terms.length <= 2)
    {
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
    else
    {
        $(this).effect("highlight", {}, 1000);
        $(this).addClass("red");
        $("#warnings").html("<span style='color:red;'>Max people reached</span>");
        return false;
    }
}

1 Ответ

4 голосов
/ 27 января 2011

Этого можно достичь очень легко, прослушав события .Вы можете сделать красный цвет, например, добавив класс и удалив класс для автозаполнения.Я думаю, что вы можете сделать это самостоятельно, приложив немного усилий. 

select: function( event, ui ) {
    var terms = split( this.value );
    if(terms.length <= 2) { 
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    } else {
        var last = terms.pop();
        $(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input
        $(this).effect("highlight", {}, 1000);
        $(this).addClass("red");
        $("#warnings").html("<span style='color:red;'>Max people reached</span>");
        return false;
    }
}

PS Я также думаю, что один из этих плагинов может подойти благодаря google :

  1. https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

    Выглядит неплохо, на мой взгляд:

    Demo tokenizing Autocomplete Plugin

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

  2. http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

  3. Плагин автозаполнения JQuery в стиле Facebook
...