将 Algolia 自动搜索延迟到第三个字符

Question

我有一个与我合作构建客户网站的开发人员（我是一名具有一定 CSS 技能的设计师），它使用了 algolia，这很棒，但我正在尝试找到一种方法，使 Algolia 在输入 3 个字符之前不会开始自动搜索，然后它可以搜索远方。

我相信这就是执行此操作的代码。我需要找出一种方法来延迟查询变得有效？直到输入3个字符

    export default function SearchPlaceholder({toggleAlgolia, query}) {
  return (
    <div className={styles.searchPlaceholder}>
      <div className={styles.searchBox}>
        <div
          role="button"
          tabIndex="0"
          className={styles.trigger}
          onClick={() => {
            toggleAlgolia(true)
          }}
          onKeyPress={(event) => {
            if (event.key === 'Enter') {
              toggleAlgolia(true)
            }
          }}
        >
          <span>Click to Search Glossary</span>
        </div>
        <input
          tabIndex="-1"
          type="search"
          value={query}
          placeholder="Search our glossary..."
          readOnly
        />
        <button type="button" tabIndex="-1" disabled>
          <SearchIcon />
        </button>
      </div>
    </div>
  )
}

Answer 1

这些不是典型的 Algolia 库——我怀疑与 Algolia 的实际连接在您的代码中更深一些。

尝试找到您的应用导入 algoliasearch 的位置，这应该会让您更接近连接到服务的位置。

我应该指出，我们通常不鼓励延迟搜索，因为它会在搜索结果中引入明显的“滞后”，您的用户可能会将其解释为响应缓慢。它不再成为“键入时搜索”，但如果您确实希望仅在达到一定数量的最小字符后才触发搜索，您可以通过使用我们的 helper.js 82 库拦截搜索来更改此默认行为。

For example, you can limit the search to only trigger on a certain number of characters, such as at least 3 characters:

searchFunction: function(helper) {              
     if (helper.state.query.length < 2) {                         
        return; // no search if less than 2 character               
    }               
    helper.search( );     
}

同样，这可能会导致用户感觉搜索滞后，但会减少搜索操作的次数并降低成本。