9

Twitter Bootstrapのバージョン2.1では、Typeaheadオプションでコールバック関数を渡す機能が追加されました。ただし、これをjQueryajax呼び出しで機能させるのに苦労しています。

これが私がこれまでに持っているものです。

HTML

<form class="form-horizontal" action="">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="myTypeahead">User</label>
            <div class="controls">
                <input type="text" id="myTypeahead" />
            </div>
        </div>
    </fieldset>
</form>

JavaScript（jQuery$(document).ready関数で設定）

$("#myTypeahead").typeahead({
  source: function (query, process) {
    $.ajax({
      type: "POST",
      url: ServiceURL + "/FindUsers",
      data: "{ SearchText: '" + query + "' }",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (r1) {
        var users = [];
        if (r1.d.Records) {
          $(r1.d.Records).each(function (index, val) {
            users.push(val.User.Name);
          });
          console.log(users);
          process(users);
        }
      }
    });
  }
});

Typeahead入力にtest（またはTest）を入力すると、Typeaheadの結果は表示されませんが、users変数からログに記録されるデータは次のようになります。

["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"]

なぜこれが機能しないのですか？

また、参考までに、Bootstrap用のTypeaheadJavaScriptを次に示します。

4

3 に答える 3

10

私はそれを考え出した。HTMLフォーム（質問にリストされている）がモーダルダイアログに表示され、Typeahead結果divがモーダルダイアログの後ろに表示されていました。

結果が返され、表示されていたことがわかりましたが、先行入力の結果コンテナが表示されませんでした。

これを修正するために、次のCSSを追加しました。

.typeahead {
    z-index: 1100;
}
于 2012-08-24T20:21:18.573 に答える
4

z-indexはブートストラップのバージョン2.3.1で機能しますが、Typeaheadメニューがダイアログの境界を超えていずれかの方向に拡張されると、メニューが途切れてしまいます。

修正として、 bootstrap.cssをロードした後にこのCSSを追加します。

/* Fix for Bootstrap dialog typeahead cut-off */
.modal-body {
    overflow: visible;
}
于 2013-04-19T21:16:05.433 に答える
0 
    $('#activity').typeahead({
                        itemSelected:function(data,value,text){
                            console.log(data)
                            alert('value is'+value);
                            alert('text is'+text);
                        },                                                    
                        ajax: {
                            url: "/path/to/destination",
                            timeout: 500,
                            displayField: "activity",
                            triggerLength: 2,
                            method: "get",
                            loadingClass: "loading-circle",
                            preDispatch: function (query) {
                                //showLoadingMask(true);
                                return {
                                    search: query
                                }
                            },
                            preProcess: function (data) {
                                //showLoadingMask(false);
                                if (data.success === false) {
                                    // Hide the list, there was some error
                                    return false;
                                }
                                // We good!            
                                return data.mylist;
                            }
                        }
});

上記のコードを使用して、タイプヘッドを機能させることができます。次の形式でJSONデータを返すことを確認してください。data.mylistは、上記のコードで機能するために存在する必要があります。

于 2013-08-12T05:24:51.620 に答える