jqueryui autocomplete限制多个选择

时间:2011-01-27 00:20:59

标签: php jquery jquery-ui autocomplete jquery-ui-autocomplete

我正在使用jQuery UI自动完成,我试图限制多个结果。基本上我正在构建一个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 个答案:

答案 0 :(得分:4)

通过倾听events,可以轻松实现这一目标。您可以将颜色设置为红色,例如adding class并将类删​​除为自动完成。我认为你可以通过一点点努力来实现这一目标。

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;
    }
}

P.S我也认为其中一个插件可能适用于google


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

    在我看来看起来不错:

    Demo tokenizing Autocomplete Plugin

    点击链接查看live demo

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

  3. Facebook style JQuery autocomplete plugin