如何在Algolia Autocomplete中设置输入框值为选中项

你遇到的问题根源是直接修改输入框DOM元素的值会被Algolia Autocomplete的内部状态覆盖，官方不推荐手动操作input元素，而是要用它提供的状态更新方法来同步输入框内容。

解决步骤 #

1. 利用onSelect回调参数里的setQuery方法更新输入框，这个方法是Autocomplete实例内置的，能同步内部状态和输入框显示。
2. 直接使用回调参数里的item对象获取选中值，比从event.target读取更可靠，避免事件冒泡导致的目标元素不准确问题。

修改后的完整代码 #

TypeScript:

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({ item, setQuery }) {
            // 使用setQuery同步输入框值和内部状态
            setQuery(item.name);
          }
        }
      ];
    },
  });
}

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

为什么原来的方法无效？ #

Algolia Autocomplete会维护自己的内部状态来管理输入框的值，当你手动修改input.value后，组件的内部状态并没有更新，后续的渲染周期会把输入框值重置回内部状态的值，所以看起来没生效。而setQuery方法会同时更新内部状态和输入框显示，确保两者同步。

内容的提问来源于stack exchange，提问作者Dan