duannao1920
2011-01-27 00:20 阅读 86

jqueryui autocomplete限制多个选择

I am using the jQuery UI autocomplete and I am attempting to limit the multiple results. Basically I'm building a PM system I am using the autocomplete for the to field. But I'm trying to limit the amount of people a single message can be sent to. So like limit the max selections to 25.

Is there any way to limit this? Also any ideas on a visual indicator that they have reached the max?

 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条回答 默认 最新

  • 已采纳
    duandun2136 duandun2136 2011-01-27 00:39

    That can be achieved real easily by listening events. You could make the color red for example by adding class and removing class to autocomplete. I think you can accomplish this yourself with a little bit of effort.

    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 I also think one of these plugins could be suitable thanks to google:


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

      Looks nice in my opinion:

      Demo tokenizing Autocomplete Plugin

      Click link to view live demo.

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

    3. Facebook style JQuery autocomplete plugin
    点赞 评论 复制链接分享

相关推荐