Javascript 如何使用Twitter实现电子邮件自动完成'；什么是引导类型？

即，如何修改代码以忽略符号@之前的所有内容？所以，当用户输入电子邮件时，一旦@被输入，我们就应该从预定义列表（如gmail.com、yahoo.com、att.net等）中为他推荐域名。

不，如果没有一些额外的魔法，你就无法做到这一点。幸运的是，这个魔术非常简单有趣。我真的很喜欢解决这个难题：）

想想我创造的这个

$.fn.typeahead.Constructor.prototype.select = function() {
    var val = this.$menu.find('.active').attr('data-value'),
        newVal = this.$element.val().replace(/@.*$/, '@' + val);
    this.$element.val(newVal);
    this.$element.change();
    return this.hide();
};

$('#email').typeahead({
    source: ['gmail', 'hotmail', 'yahoo'],
    matcher: function(item) {
        var m = this.query.indexOf('@'),
            search;

        if (!~m) {
            return false;
        }

        search = this.query.substr(m + 1).toLowerCase();
        return search.length && ~item.toLowerCase().indexOf(search);
    }
});

---

首先，您需要定义自定义的

matcher

函数，以定义哪些值被认为是合适的。这很容易。复杂的部分是，您需要更改Typeahead原型，以使插件设置输入字段的正确新值：例如，不是

gmail

，“yahoo”，而是完整的电子邮件地址，如

tomas@gmail.com

，等等。

不，没有一些额外的魔法，你是做不到的。幸运的是，这个魔术非常简单有趣。我真的很喜欢解决这个难题：）

想想我创造的这个

$.fn.typeahead.Constructor.prototype.select = function() {
    var val = this.$menu.find('.active').attr('data-value'),
        newVal = this.$element.val().replace(/@.*$/, '@' + val);
    this.$element.val(newVal);
    this.$element.change();
    return this.hide();
};

$('#email').typeahead({
    source: ['gmail', 'hotmail', 'yahoo'],
    matcher: function(item) {
        var m = this.query.indexOf('@'),
            search;

        if (!~m) {
            return false;
        }

        search = this.query.substr(m + 1).toLowerCase();
        return search.length && ~item.toLowerCase().indexOf(search);
    }
});

---

首先，您需要定义自定义的

matcher

函数，以定义哪些值被认为是合适的。这很容易。复杂的部分是，您需要更改Typeahead原型，以使插件设置输入字段的正确新值：例如，不是

gmail

，“yahoo”，而是完整的电子邮件地址，如

tomas@gmail.com

，等等。

实际上我们不需要做一些扩展，只需要像这样使用ajax函数

$('.typeahead').typeahead({
    source: function (typeahead, query) {

     var con = $('#input1').val();
     var atpos = con.indexOf('@');
     if(atpos==-1){
        return [con+'@gmail.com',con+'@sina.com',con+'@qq.com',con+'@126.com'];
     }else if(atpos>0){
         //get value before @
         var tmp = con.substr(0,atpos);
         return [tmp+'@gmail.com',tmp+'@sina.com',tmp+'@qq.com',tmp+'@126.com'];
     }else{

     }
     //return ['alpha','beta','bravo','delta','epsilon','gamma','zulu'];
    }
});

---

实际上我们不需要做一些扩展，只需要像这样使用ajax函数

$('.typeahead').typeahead({
    source: function (typeahead, query) {

     var con = $('#input1').val();
     var atpos = con.indexOf('@');
     if(atpos==-1){
        return [con+'@gmail.com',con+'@sina.com',con+'@qq.com',con+'@126.com'];
     }else if(atpos>0){
         //get value before @
         var tmp = con.substr(0,atpos);
         return [tmp+'@gmail.com',tmp+'@sina.com',tmp+'@qq.com',tmp+'@126.com'];
     }else{

     }
     //return ['alpha','beta','bravo','delta','epsilon','gamma','zulu'];
    }
});

---

不错；）谢谢你的编码。有没有办法显示完整的电子邮件(tomas@gmail.com, tomas@mail.com)在下拉列表中？（这样用户就不会对所选择的值（gmail.com、mail.com）将替换他输入的值（tomas）感到困惑）？非常感谢，dfsq！我如何使这些

匹配器

和

渲染

字段仅适用于一个字段，因为我有一个电子邮件字段和许多其他字段，标准的

提前键入

应该可以工作。请查看此演示-很好；）感谢您编写它。有没有办法显示完整的电子邮件(tomas@gmail.com, tomas@mail.com)在下拉列表中？（这样用户就不会对所选择的值（gmail.com、mail.com）将替换他输入的值（tomas）感到困惑）？非常感谢，dfsq！由于我有一个电子邮件字段和许多其他字段，标准的

typeahead

应该在这些字段中工作，因此如何使这些

matcher

和

渲染

字段仅适用于一个字段。请参阅此演示-