InstantSearch.js如何配置多个相互独立的searchBox搜索框

InstantSearch.js 内置的searchBox组件默认双向绑定全局搜索状态里唯一的根查询字段query，所有挂载的searchBox实例都会同步读写这个全局值，不管加多少个，输入内容都会互相同步，直接重复调用组件注册不可能实现独立运行的效果。

方案1：独立挂载AutoComplete组件（最适配你的需求） #

你的第二个输入框本来就是要做AutoComplete联想，完全没必要注册成searchBox组件：

• 第一个常规搜索框保留现有代码逻辑，正常对接主搜索的全局查询状态即可
• 第二个输入框不走addWidgets注册流程，直接初始化独立的AutoComplete实例对接同个Algolia索引做联想查询，输入状态单独维护，和主搜索框完全不会有内容同步的问题。

方案2：自定义connector做状态隔离 #

如果需要两个输入框都接入InstantSearch的生态但状态互不干扰，可以基于官方提供的connectSearchBox接口自定义封装组件，给第二个搜索框绑定独立的状态字段，不读写全局默认的query值，参考代码：

// 封装独立状态的搜索框组件
const independentSearchBox = instantsearch.connectors.connectSearchBox(
  ({ widgetParams }, isFirstRender) => {
    const inputEl = document.querySelector(widgetParams.container);
    if (isFirstRender) {
      inputEl.addEventListener('input', (e) => {
        // 单独处理输入，不触发全局query更新
        widgetParams.onInput?.(e.target.value.trim());
      });
    }
  }
);

search.addWidgets([ 
  instantsearch.widgets.searchBox({
    container: '#searchbox',
    placeholder: 'Regular Searchbox',
    autofocus: true,
    searchAsYouType: false,
    showReset: true,
    showSubmit: true
  }),
  independentSearchBox({
    container: '#searchbox-2',
    onInput: (searchVal) => {
      // 在这里写AutoComplete的联想触发逻辑，和主搜索框状态完全隔离
    }
  })
]);

方案3：多实例做完全隔离 #

如果两个搜索框需要各自触发独立的结果集渲染，直接初始化第二个独立的InstantSearch实例绑定同一个索引就可以，两个实例的状态完全分开，不存在任何互相影响的可能。

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