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

Question

我有一位开发人员与我合作构建了一个客户端网站(我是一名具有一些CSS技能的设计师(，它使用了algolia，这很好，但我正在努力找到一种方法，使Algoliaa在输入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( );     
}

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