jqueryui自动完成限制多选

Posted 2023-05-08

【中文标题】jqueryui自动完成限制多选

【英文标题】：jqueryui autocomplete limit multiple selections

【发布时间】：2016-03-22 10:58:16

【问题描述】：

我正在使用 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】：

这可以通过收听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，这些插件之一可能是合适的：

---

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

在我看来看起来不错：

点击链接查看live demo。

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

Facebook style JQuery autocomplete plugin

【讨论】：

好的，在我原来的帖子上我已经添加了一些代码。无论如何我可以删除盒子中的最新添加物吗？就像我想保留其他名称一样，但我想删除用户添加的最新名称。当您达到允许的最大字符数时，theproductguy.com/noblecount/noblecount.demo.html 会执行此类操作。

你不能像在代码中那样使用split( term ).pop()吗？ P.S：也许你可以使用这个，因为它已经有你的功能并且看起来也很漂亮（像 facebook）=> github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

好的，我最终使用了该标记化插件，这就是我所做的：我必须进行一些调整才能将列表发送到我的服务器，因此它不会显示两次名称，将设置更改为仅允许25 个名字，但在那之后它就像一个魅力。谢谢您的帮助！我已接受您的回答并为您投票：)

@jefffan24 你必须做一些正确的错误修复：P。因为 tokenLimit 默认不工作。您能否与我分享您的更改：P，因为我试图实现相同的目标；）

在第 351 行将其更改为： if(settings.tokenLimit != null && settings.tokenLimit