使用 Algolia Autocomplete 将输入值设置为所选项目

Question

我正在使用 Algolia Autocomplete 和自定义 JSON 源。它工作正常，只是当用户选择其中一个选项时，我看不到如何将输入值更新为所选自动完成下拉列表的值。

HTML：

<div id="autocomplete"></div>
<div id="results-container"></div>

打字稿：

import { autocomplete } from '@algolia/autocomplete-js';
import '@algolia/autocomplete-theme-classic';

function init() {
  autocomplete({
    container: '#autocomplete',
    panelContainer: '#results-container',
    placeholder: 'Search for schools...',
    getSources({ query }) {
      return [
        {
          sourceId: 'schoolsAPI',
          getItems() {
            return fetch(`/api/schoolslookup?q=${query}&limit=20`)
              .then(response => response.json())
              .then(data => data);
          },
          templates: {
            item({ item, html }) {
              return html`<div>${item.name}</div>`;
            },
            noResults() {
              return 'No results.';
            },
          },
          onSelect({ event }) {
            const selectedEl = event.target as HTMLDivElement;
            const input = document.querySelector<HTMLInputElement>('.aa-Input');
            if (input) {
              input.value = selectedEl.innerText;
              // eslint-disable-next-line no-console
              console.log(selectedEl.innerText);
            }
          }
        }
      ];
    },
  });
}

export default () => {
  init();
};

根据代码，我尝试在自动完成源中使用

onSelect

方法，并且确实显示了记录到控制台的正确值。它还成功获取输入元素。但它似乎并没有更新输入的值，所以我不确定这是否是解决问题的方法，或者 Algolia Autocomplete 是否使用其他一些动态元素来显示所选值。我在文档中找不到详细说明如何执行此操作的任何内容。我能找到的所有例子都有用：

.on('autocomplete:selected', function(event, suggestion, dataset) {
  console.log(suggestion, dataset);
})

…但是我正在使用的 Algolia Autocomplete 版本（1.17.2）中似乎不存在

on

方法。

Answer 1

onSelect: function (event) {
  event.setQuery(event.item.name as string);
}