Twitterのブートストラップの先読みで電子メールの自動補完を実装する方法は？

Question

I.e.シンボル@の前にすべてを無視するコードTwitter's bootstrap typeaheadを変更する方法？だから、ユーザーが電子メールを入力すると@が入力されると、あらかじめ定義されたリスト（gmail.com、yahoo.com、att.netなど）から彼のドメインを提案するべきです。

Answer 1

いいえ、あなたは追加の魔法なしではできません。幸いにも、この魔法はかなり簡単で楽しいです。私はこのパズルを解決することを本当に楽しみました:)

これを考慮してexample私は作成しました。

$.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などの完全な電子メールアドレス

Answer 2

実際には、これを拡張する必要はありません。このような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']; 
    } 
});