私がautocomplete.jsを適用するたびに、入力テキストボックスがAlgolia

Question

に変更されます。私のウェブサイトで検索を実行するのにAlgoliaを使用していますが、私は一つのことを認識しました。私の検索入力フィールドをカスタマイズするのにsearch box generatorを使っています。しかし、私は最初は私の検索入力欄 にautocomplete.jsを適用しようとすると問題が発生、それは、以下のいずれかのよう

に見えるが、私はオートコンプリート機能を適用する場合には、この

のようになります。

コード - HTML

<form id="search" novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-google" style="margin-top: 7px;"> 
     <div role="search" class="sbx-google__wrapper"> 
      <input type="search" id="search_input" name="search" placeholder="Search" autocomplete="off" required="required" class="sbx-google__input"> 
      <button type="submit" title="Submit your search query." class="sbx-google__submit"> 
      <svg role="img" aria-label="Search"> 
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use> 
      </svg> 
      </button> 
      <button type="reset" title="Clear the search query." class="sbx-google__reset"> 
      <svg role="img" aria-label="Reset"> 
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use> 
      </svg> 
      </button> 
     </div> 
     </form> 

コード - JAVASCRIPT

autocomplete('#search_input', 
{ hint: false }, { 
    source: autocomplete.sources.hits(index, {hitsPerPage: 5}), 
    //value to be displayed in input control after user's suggestion selection 
    displayKey: 'name', 
    //hash of templates used when rendering dataset 
    templates: { 
     //'suggestion' templating function used to render a single suggestion 
     suggestion: function(suggestion) { 
      console.log(suggestion) 
      return '<span>' + 
      suggestion._highlightResult.title.value + '</span>'; 
     } 
    } 
}); 

カスタム検索ボックスには、autocomplete documentationのalgolia自身が通知します。私はこの問題を解決する方法については考えていない、jsスクリプトのようなCSSのスタイルを上書きするようだ。私はオートコンプリート機能ここで

で#search_inputに渡された場合にのみ起こるhttps://jsfiddle.net/Ldpqhkam/

Answer 1

Algoliaの自動補完がinput周りspanを追加するJSのフィドルであり、そのデザインを壊すものです。インラインスタイルで表示を変更すると、デザインを修正するためにオーバーライドすることができます。

.algolia-autocomplete { 
    display: inline !important; 
}