每当我应用 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 时才会发生这种情况

这里是jsfiddlehttps://jsfiddle.net/Ldpqhkam/

Answer 1

Algolia 自动完成在 input 周围添加了一个 span，这就是破坏设计的原因。它有改变显示的内联样式，你可以覆盖它来修复设计。

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

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

Whenever I apply autocomplete.js the input text box will change Algolia

algolia