每当我应用autocomplete.js时,输入文本框都会改变Algolia

Question

我使用algolia在我的网站上进行搜索,但我意识到了一件事.我使用搜索框生成器来自定义我的搜索输入字段.但是当我尝试在我的搜索输入字段上应用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>';
        }
    }
});

algolia自己会在自动填充文档中提供自定义搜索框.我不知道如何解决这个问题,好像js脚本覆盖了css样式.只有在我传入#search_input自动完成功能时才会发生这种情况

这是js小提琴https://jsfiddle.net/Ldpqhkam/

Answer 1

Algolia autocomplete增加了一个span周围input的东西,这就是破坏设计的原因.它具有内联样式更改显示,您可以覆盖它来修复设计.

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