どのように私はCSSのタイプヘッドjを上書きすることができます

私は入力ヘッドの入力フォームの検索を上書きしたいと思います。実際に私の入力は私の列divからすべての場所を取っていないので。どのように私はCSSのタイプヘッドjを上書きすることができます

あなたが見ることができるように：

を私はこのような本格的なバーを持っていると思います（私は入力された名前が、検索は、変更後に動作しない変更したときに私はこれを行うことができます）：

ここでは完全なコード：（:)誰かが私を助けることができる願っています）

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Recherche</div> 
        <div class="panel-body"> 

         <form class="typeahead" role="search"> 
          <div class="form-group"> 
           <input type="search" name="q" class="typeahead form-control" placeholder="Search" autocomplete="off"> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 


<!-- jQuery (necessary for Bootstrap's JavaScript plugins and Typeahead) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Bootstrap JS --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<!-- Typeahead.js Bundle --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> 
<!-- Typeahead Initialization --> 
<script> 
    jQuery(document).ready(function($) { 
     // Set the Options for "Bloodhound" suggestion engine 
     var engine = new Bloodhound({ 
      remote: { 
       url: 'find?q=%QUERY%', 
       wildcard: '%QUERY%' 
      }, 
      datumTokenizer: Bloodhound.tokenizers.whitespace('q'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace 
     }); 

     $(".typeahead").typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, { 
      source: engine.ttAdapter(), 

      // This will be appended to "tt-dataset-" to form the class name of the suggestion menu. 
      name: 'usersList', 

      // the key from the array we want to display (name,id,email,etc...) 
      templates: { 
       empty: [ 
        '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>' 
       ], 
       header: [ 
        '<div class="list-group search-results-dropdown">' 
       ], 
       suggestion: function (data) { 
        return '<a href="user/' + data.id + '" class="list-group-item">' + data.name + ' - ' + data.email + '</a>' 
       } 
      } 
     }); 
    }); 
</script>

出典

2017-12-06 Mathieu Mourareau

<style> 
    .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; } 
</style>

があなたの<head>タグにこのstyleタグを入れて、これを試してみてください。

出典

2017-12-06 10:16:47

どこに挿入すればよいですか？ –

@MathieuMourareau私の更新された回答を参照 –

完璧な男！ありがとうたくさん –

どのように私はCSSのタイプヘッドjを上書きすることができます

答えて

関連する問題