1

私はここでこのようなブートストラップtypeaheadプラグインのフォークを見てきました：

https://gist.github.com/1866577

ただし、Webアプリケーションに必要なフォーム要素を作成する方法を理解できません。基本的に、私のWebアプリケーションは、次のWebサイトによって提供される機能を模倣したいと思います。

slugbooks.com

そのWebサイトにあるような3つのオートコンプリートフォームが必要ですが、Webアプリの残りの部分はBootstrapにあるため、TwitterBootstrapを使用したいと思います。大学のように最初のオートコンプリートが必要です...これは、ブートストラップ先行入力プラグインを使用して簡単に実行できます。私はこの部分を理解しました。オートコンプリートのドロップダウンの次は、複雑になるところです。

このStackOverflowの質問のおかげで、先行入力ドロップダウンを作成する方法をすでに学びました。

Twitterブートストラップ先行入力コンポーネントにドロップダウンボタンを追加する

今、私は、どの大学が選択され、次にどの学部が選択されたかに基づいて、ドロップダウンのデータソースを動的に生成する方法が必要です。また、適切なコース（3番目のドロップダウン）を選択すると、特定のページ（例：site.com/college/coursename.html）にリダイレクトされます。

Twitter Bootstrap Typeaheadでこれをどのように達成しますか？

データ例：

大学：

  • UTEXAS
  • UMIAMI
  • USC
  • スタンフォード

部門：

  • 1,2,3<=スタンフォード
  • 4,5,6 <= USC
  • 7,8,9 <= UMIAMI
  • A、B、C <= UTEXAS

コース：

  • a <= 1
  • b <= 2
  • c <= 3
  • d <= 4
  • e <= 5
  • f <= 6
  • g <= 7
  • h <= 8
  • i <= 9
  • j <= A
  • k <= B
  • l <= C

警告：私はjavascript / AJAX noobなので、javascript/AJAXが関係している場合はよく案内してください...

4

1 に答える 1

1

これがあなたが始めるべき何かです：ライブデモ（jsfiddle）

// This wrapping is here only for visibility on JSFIDDLE (and because it's fun)
!function(colleges, ajaxLoadDepartments){
    var $one = $('#one');
    var $two= $('#two');

    var loadSourceForTwoWith = function(item) {  // Function that reset the departments, accepts the name of the college
        $two.data('typeahead', false).val('');       // Clear departments
        ajaxLoadDepartments(item, function(departments) {     // This fonction should be the success of the ajax call
            $two.typeahead({                           // this ajax call should return the departments of the `item` college
                source: departments                    // as an array of strings
            }).focus();
        });
    };

    $one.typeahead({
        source: colleges,
        updater: function(item) { // Item is selected, should return item
            loadSourceForTwoWith(item);
            return item;
        }
    });

}( /* Don't bother too much with what's below, just use your what is above with your real code(ajax) and data */
    ['UTEXAS', 'UMIAMI', 'USC', 'STANFORD'],
    function(item, callback) {
        var jsonResponse = {
            'STANFORD' : ['X1','X2','X3'],
            'USC' : ['X4','X5','X6'],
            'UMIAMI' : ['X7','X8','X9'],
            'UTEXAS' : ['XA','XB','XC']
        };

        $.ajax('/echo/json/', {
            type: 'post',
            data: {json: JSON.stringify(jsonResponse[item])}
        }).done(function(data) {
            callback(data);
        });
    }
);

この単純な例は、次の方法を示しています。

  • 選択したアイテムに独自のコールバックを設定します：を参照してくださいupdater
  • 先行入力ソースをリセットする（非常に難しい方法）：を参照してください.data('typeahead', false)
  • コールバック関数を使用して非同期でロードする
  • JSで頭を悩ます

コピー/貼り付けを行う前に、これは標準の先行入力プラグインのみを使用し、エラー処理（入力、ajaxエラー、遅延ユーザー認識）については何も行われないことを知っておく必要があります。

于 2012-10-09T22:49:44.467 に答える