[bootstrap][javascript][typeahead]Gmailのようなメールアドレス入力サンプル（サジェスト検索）

アドレスを入力すると候補一覧が出てきて、選択すると自動補完し枠で囲まれて表示するサンプルです。
※最近Qiitaでも似たようなのを見かけましたが、Typeaheadを利用したかったので1から作りました

テキストに2文字以上の入力を行ったら、サーバーから対象のメールアドレスを取得してTypeaheadに表示。一覧から選択されたら、枠で囲って表示するしテキストボックス上にあたかも表示されているように見せます。
実際のDemoはこちら

    //レスポンス
    $response = array();

    //検索文字列パラメータ
    $searchStr=@$_GET["q"];
    if($searchStr!=""){
    
        //メールアドレス一覧
        $mails[]="test1@yoshi.com";
        $mails[]="sample1@yoshi.com";
        $mails[]="dummy1@yoshi.com";
        $mails[]="test2@yoshi.com";
        $mails[]="sample2@yoshi.com";
        $mails[]="dummy2@yoshi.com";
        $mails[]="test3@yoshi.com";
        $mails[]="sample3@yoshi.com";
        $mails[]="dummy3@yoshi.com";
        
        //検索文字列が含まれているアドレスを戻す
        foreach ($mails as $mail) {
            if(strpos($mail,$searchStr)!==false){
                $response[]=$mail;
            }
        }
    }
    //json形式で戻す
    echo json_encode($response);

サーバー側では、GETパラメータの文字列が含まれているメールアドレスを抽出して、JSON形式で戻します。

    
    
    
    
    
    


    
Typeahead MailInput Sample
    

        
        

    
    
    
    
    
    
    
    

Typeaheadでは、optionであるsourceにfunctionをセットすることで動的に一覧の値を変更する事が可能です。通常動作では一覧から選択したタイミングで対象のテキストボックスに値が入ってきます。今回は選択したタイミングで枠で囲って表示するため、changeイベントで処理を行っています。
※ul liのクリックイベントはbootstrap側でキャンセルされてしまうので、changeイベントで行っています。

以前、Bootstrapのソースを解析しましたので、こちらも参考にしてください。
また上記のソースコードはこちら