TypeAheadとjQueryおよびブートストラップ2.1を使用する

Question

バージョン2.1 of Twitter Bootstrapでは、Typeaheadオプションwas addedでコールバック関数を渡すことができます。しかし、私はこれをjQueryのajax呼び出しで動作させるのが難しい状況にありました。

これまで私がこれまで持っていたことは次のとおりです。

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); 
     } 
     } 
    }); 
    } 
}); 

Iが先行入力入力にtest（又はTest）を入力し、いかなる先行入力結果が表示されていませんしかし、users変数から記録されるデータは、次のようになります。

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

なぜこれは機能しませんか？

また、参考として、Typeahead JavaScript for Bootstrapです。

Answer 1

私はそれを理解しました。 HTMLフォーム（質問に記載されています）がモーダルダイアログに表示され、Typeahead結果のdivがモーダルダイアログの後ろに表示されました。

結果が返されて表示されていますが、先読み結果のコンテナは表示されませんでした。

はそれを修正するために、私はこのCSSを追加しました：

.typeahead { 
    z-index: 1100; 
} 

Answer 2

のz-indexがブートストラップのバージョン2.3.1で動作しますが、彼らは国境を超えている場合先行入力メニューはまだカットオフゲットダイアログをいずれかの方向に押します。修正として

、 bootstrap.cssロードした後、このCSS を追加：あなたはtypehead仕事を得るために、コードの上に使用することができます

/* Fix for Bootstrap dialog typeahead cut-off */ 
.modal-body { 
    overflow: visible; 
} 

Answer 3

$('#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が存在する必要があります。