sql >> データベース >  >> RDS >> Mysql

Twitterブートストラップtypeaheadは複数の値を返し、編集ボックスを埋めます

    私があなたを正しく理解している場合、あなたは結果を取り戻していますが、入力フィールドに入力することはできません。 Twitter Bootstrap typeaheadは使用していませんが、jQueryのオートコンプリート機能と非常によく似た処理を実行します。以下のコードはテストされていません。もちろん、自分でコードを変更する必要がありますが、役立つことを願っています。

    この動作中のjsFiddleデモを参照してください 似たようなもののために。

    PHP

    $array = array();
    while ($row = mysql_fetch_assoc($sql)) {
        array_push($array,array('ContactName'=>$row['ContactName'],'Telephone'=>$row['Telephone'],'Email'=>$row['Email']));
    }
    echo json_encode($array);
    


    URLを手動で入力すると、何が返されるかを確認できます(例:yoursite / Customer.php?query =SomeContactName)。これに似たものが表示されるはずです:

    [{"ContactName":"Some Contact","Telephone":"5555555555","Email":"[email protected]"},
     {"ContactName":"Some Other Contact","Telephone":"5555555555","Email":"[email protected]"}]
    


    HTML / Javascript

    <script>
        $('input.typeahead').typeahead({
            source: function (query, process) {
                $.ajax({
                    url: 'Customer.php',
                    type: 'POST',
                    dataType: 'JSON',
                    // data: 'query=' + query,
                    data: 'query=' + $('#contactName').val(),
                    success: function(data)
                    {
                        var results = data.map(function(item) {
                            var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
                            return JSON.stringify(someItem.contactname);
                        });
                        return process(results);
                    }
                });
            },
            minLength: 1,
            updater: function(item) {
                // This may need some tweaks as it has not been tested
                var obj = JSON.parse(item);
                return item;
            }
        });
    </script>
    

    AJAXからの応答を返す方法をご覧ください。電話しますか? および Bootstraptypeaheadajax結果フォーマット-例




    1. MySQlクエリ実行プラン

    2. MySQLデータベースがXAMPPManagerで起動しない-osx

    3. VARCHAR列への挿入時にCHARデータを自動的にトリミングする

    4. PostgreSQLでパターンを照合しながら文字列をエスケープする方法