在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"}

答

问题解决：只应删除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%; 
}

对于那些谁使用托管引导（或其他需要重写，而不是改变原始引导CSS）：'的z-index：inherit' – sirvine

在Bootstrap 3 typeahead中禁用输入

相关推荐