jQueryUI的自动完成极限多种选择 [英] jqueryui autocomplete limit multiple selections

问题描述

我使用jQuery UI的自动完成，我试图限制多个结果。基本上我建我使用的是自动完成的调遣PM系统。但我试图限制人们单个邮件可以发送到的金额。所以像限制最多选择25。

有什么办法来限制呢？他们已经达到最大的视觉指示器还什么想法？

 选择：函数（事件，UI）{
    VAR而言=拆分（THIS.VALUE）;
    如果（terms.length＆下; = 2）
    {
        //删除当前输入
        terms.pop（）;
        //添加所选项目
        terms.push（ui.​​item.value）;
        //添加占位符来获得在最后逗号和空格
        terms.push（）;
        THIS.VALUE = terms.join（，）;
        返回false;
    }
    其他
    {
        $（本）.effect（亮点，{}，1000）;
        $（本）.addClass（红）;
        $（＃警告）HTML（＆LT;跨度风格=颜色：红色;'＆GT;最多达人＆LT; / SPAN＆gt;中）。
        返回false;
    }
}
 

解决方案

这可以很容易地真正聆听的事件的。您可以通过添加类并去除类自动完成制作，例如红色。我想你可以用这样的一点点努力完成自己。

 选择：函数（事件，UI）{
    VAR而言=拆分（THIS.VALUE）;
    如果（terms.length＆下; = 2）{
        //删除当前输入
        terms.pop（）;
        //添加所选项目
        terms.push（ui.​​item.value）;
        //添加占位符来获得在最后逗号和空格
        terms.push（）;
        THIS.VALUE = terms.join（，）;
        返回false;
    }其他{
        VAR最后= terms.pop（）;
        $（本）.VAL（this.value.substr（0，this.value.length  -  last.length  -  2））; //将删除输入文本
        $（本）.effect（亮点，{}，1000）;
        $（本）.addClass（红）;
        $（＃警告）HTML（＆LT;跨度风格=颜色：红色;'＆GT;最多达人＆LT; / SPAN＆gt;中）。
        返回false;
    }
}
 

PS我也觉得这些插件之一可能是合适的感谢谷歌：

---

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

   看起来在我看来，漂亮的：

   

   点击链接查看现场演示。




2. <一个href=\"http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/\" rel=\"nofollow\">http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/



3. Facebook的风格JQuery的自动完成插件

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

解决方案

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:

   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

这篇关于jQueryUI的自动完成极限多种选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！