每当我应用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>';
        }
    }
});

algolia自己在autocomplete documentation上建议自定义搜索框。我不知道如何解决这个问题，好像js脚本覆盖了css样式。只有在我通过自动完成功能中的#search_input

时才会发生这种情况

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

Answer 1

Algolia自动完成功能会在span周围添加input，这就是打破设计的原因。它具有更改显示的内联样式，您可以覆盖它以修复设计。

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