在Bootstrap 3 typeahead中禁用輸入

我在引導模式窗口（通過AJAX加載）中使用多個輸入。我希望在這些輸入上使用與Bloodhound集成的typeahead.js。數據集正確加載（如JSON），但出於某種原因，我不明白輸入會自動禁用。我正在使用最新版本的一切。在Bootstrap 3 typeahead中禁用輸入

這裏的輸入標籤（與相關的隱藏輸入）。該引擎執行數據自動完成來完成構建遠程URL。

<input type="text" class="typeahead form-control" data-provide="typeahead" id="my_input" data-autocomplete='users'> 
      <input type="hidden" name="my_input" />

這裏我的JavaScript代碼：

$.get(window.BASE_URL+'/form',function(data){ 
     /*SUGGESTIONS ENGINE*/ 
     var autocomplete; 
     var autocomplete = new Bloodhound({ 
      datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.id); }, 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      limit: 20, 
      remote: { 
      url: window.BASE_URL+'the-url/', 
      replace: function(url,uriEncodedQuery) { 
        if(typeof $('input:focus').attr('data-autocomplete')!='undefined') 
        { 
         var new_url=url+$('input:focus').attr('data-autocomplete')+'?texto='+$('input:focus').val()+'&tipo='+$('input:focus').attr('id'); 
         return new_url; 
        } 
      } 
      } 
     }); 

     autocomplete.initialize(); 

     //LOAD TYPEAHEADS 
     $('.modal-body').find('input.typeahead').typeahead({ 
      minLength: 2, 
      highlight:true 
     },{ 
      name: 'autocomplete',  
      displayKey:'label', 
      source: autocomplete.ttAdapter(),    
     }).on('typeahead:selected', function(obj, datum) {   
      //console.log(JSON.stringify(this)); 
      //If the text has an id seeks its hidden twin 
      if(typeof $(this).attr('id')!='undefined') 
       $('input[name="'+$(this).attr('id')+'"]').val(datum.id); 
     }); 
    });

從JSON響應的項的格式如下：

{"id":"1","label":"McDonald, Richard"}

來源

2014-02-15 damvaz

問題解決：只應刪除z-index屬性到一個元素。

前：

.modal .twitter-typeahead .tt-hint { 
    margin-bottom: 0; 
    z-index: 1; 
    width: 100%; 
}

後：

.modal .twitter-typeahead .tt-hint { 
    margin-bottom: 0; 
    width: 100%; 
}

來源

2014-02-16 14:37:27 damvaz

對於那些誰使用託管引導（或其他需要重寫，而不是改變原始引導CSS）：'的z-index：inherit' – sirvine

在Bootstrap 3 typeahead中禁用輸入

回答

相關問題