Javascript使用jQuery UI自动完成电子邮件的域

我需要帮助，我一直在努力使以下案例场景正常工作： 如果您有电子邮件输入字段，请键入：foo@y-它应该弹出自动完成框，例如提供yahoo.com。 如果您接受此建议，最终值应为：foo@yahoo.com

我根据另一个jquery UI示例编写了这段代码：

        $( "#tags" )
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                        $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 3,
                source: function( request, response ) {
                            var mail_regex = /^([\w.]+)@([\w.]+)$/;
                            var match = mail_regex.exec(request.term);
                            if (match)
                                var matcher = new RegExp( "^" + match[2], "i" );
                            response( $.grep( availableTags, function( item ){
                                return matcher.test( item );
                            }) );
                 },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // 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;
                }
            });

完整工作交互示例：

然而，它只是用yahoo.com替换了foo@而已——我一辈子都不知道如何克服这种行为

任何Javascript/jQuery大师-请帮助！如何实现这一目标？
我尝试了以下操作：返回match[1]+matcher.test项，但不起作用。
以下是完整的代码：

$(function() {
    var availableTags = [
        "Yahoo.com",
        "Gmail.com"
    ];
    function extractLast( val ) {
        if (val.indexOf("@")!=-1){
            var tmp=val.split("@");
            console.log(tmp[tmp.length-1]);
            return tmp[tmp.length-1];
        }
        console.log("returning empty");
        return "";
    }

    $( "#tags" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 1,
            source: function( request, response ) {
                        var mail = extractLast(request.term);
                        if(mail.length<1){return;}
                        var matcher = new RegExp( "^" + mail, "i" );
                        response( $.grep( availableTags, function( item ){
                            return matcher.test( item );
                        }));
             },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = this.value.split(", ");
                // remove the current input
                var ml=terms[terms.length-1].split("@")[0];
                terms.pop();
                // add the selected item
                terms.push( ml+"@"+ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });
});

select函数正在为结果值赋值。值=。但是，它将完全替换输入值，而不是用下拉值附加输入值

在不进行大量测试的情况下，简化的功能似乎可以按要求工作：

select: function( event, ui ) {
    this.value = this.value.substring(0, this.value.indexOf('@') + 1) + ui.item.value;
    return false;
}

这是将已输入值的第一部分，例如foo@作为输入foo@ya然后添加下拉列表中所选项目的值

当有人输入@符号时，您可能希望触发下拉菜单，如果是这样，此功能可能还需要修改以正确提取用户输入的值。
谢谢！我现在明白了：你能解释一下如何将触发器设置为@symbol吗？目前我有它的3个字符的最低限度a@b作为触发暂时-这是有效的，但我不满意这种方法。对不起，我没有时间进一步研究这个问题。如果你对另一个解决方案满意，你需要触发@still吗？谢谢，但我目前得到的是可以接受的。我有一个选择功能：为什么要使用push？我的方法不是很好吗？我将看看JSFIDLE上的代码，terms是一个数组，用于自动完成由逗号分隔的多个单词。将我的答案更改为发布完整代码，以自动完成由逗号分隔的多封电子邮件