Algolia InstantSearch:如何使搜索与带括号的格式无关?
Algolia InstantSearch: How to make a search agnostic to formatting with parens?
我正在尝试制作一个 React 即时搜索,让您可以搜索 phone 号码。它们需要以这种格式显示:“(123)456-7890”,但我希望能够使用“(123)456-7890”或“1234567890”进行搜索。
我想我可以将它存储在格式化的索引中,然后拼写错误容忍会处理非格式化查询。但是我没有得到查询“1234567890”的结果。这显然与格式将数字分成三个词而查询只是一个词这一事实有关。奇怪的是,这意味着添加括号不会让您在搜索中获得更多匹配字符,但将它们遗漏可能会导致查询根本不匹配。
然后我尝试将其作为非格式化(仅数字)存储在索引中。这一次,格式化和未格式化的查询都得到了匹配。但是,当我逐位输入时,当我输入“(123)”时结果消失,只有当我输入“(123)456-7”时才会重新出现。准确键入结果显示的数字并让它消失似乎是一种令人沮丧和奇怪的用户体验。
我试过将 perens 添加到可选单词设置中,但这似乎没有任何效果。我想如果我能让 Algolia 忽略 perens 和 dash,而不是用 space 替换它们,那么整个事情就不会成为问题。有没有办法做到这一点?也许最好在将查询发送到 Algolia 之前找到一种方法来过滤查询?我应该怎么做?
将 1234567890
存储在名为 phoneNoFormat
的属性中,将 (123)456-7890
存储在名为 phoneFormat
的属性中。将两者都包含在 searchableAttributes
中。在显示端,查看 _highlightResult
字段以查看匹配的属性并呈现该属性的突出显示结果。使用默认的拼写错误容忍度,这些查询中的每一个都将匹配并正确突出显示一个或两个属性。
1234567890
123-456-7890
(123)456-7890
(123) 456-7890
(123)4567890
(123) 4567890
由于您使用的是 React InstantSearch,因此您需要制作自己的 Hits
组件,您可以在其中更改用于显示每次点击结果的属性名称。值得庆幸的是,这并不太复杂。请参阅 connectHits.
的文档
当您遍历命中时,查看每个命中的 _highlightResult
属性 以查看两个属性中的哪一个匹配。然后,当您创建 <Highlight />
组件时,将 attributeName
属性 设置为正确的属性。所以你有这个:
<Highlight attributeName='phoneFormat' hit={hit}/>
或者这样:
<Highlight attributeName='phoneNoFormat' hit={hit}/>
我正在尝试制作一个 React 即时搜索,让您可以搜索 phone 号码。它们需要以这种格式显示:“(123)456-7890”,但我希望能够使用“(123)456-7890”或“1234567890”进行搜索。
我想我可以将它存储在格式化的索引中,然后拼写错误容忍会处理非格式化查询。但是我没有得到查询“1234567890”的结果。这显然与格式将数字分成三个词而查询只是一个词这一事实有关。奇怪的是,这意味着添加括号不会让您在搜索中获得更多匹配字符,但将它们遗漏可能会导致查询根本不匹配。
然后我尝试将其作为非格式化(仅数字)存储在索引中。这一次,格式化和未格式化的查询都得到了匹配。但是,当我逐位输入时,当我输入“(123)”时结果消失,只有当我输入“(123)456-7”时才会重新出现。准确键入结果显示的数字并让它消失似乎是一种令人沮丧和奇怪的用户体验。
我试过将 perens 添加到可选单词设置中,但这似乎没有任何效果。我想如果我能让 Algolia 忽略 perens 和 dash,而不是用 space 替换它们,那么整个事情就不会成为问题。有没有办法做到这一点?也许最好在将查询发送到 Algolia 之前找到一种方法来过滤查询?我应该怎么做?
将 1234567890
存储在名为 phoneNoFormat
的属性中,将 (123)456-7890
存储在名为 phoneFormat
的属性中。将两者都包含在 searchableAttributes
中。在显示端,查看 _highlightResult
字段以查看匹配的属性并呈现该属性的突出显示结果。使用默认的拼写错误容忍度,这些查询中的每一个都将匹配并正确突出显示一个或两个属性。
1234567890
123-456-7890
(123)456-7890
(123) 456-7890
(123)4567890
(123) 4567890
由于您使用的是 React InstantSearch,因此您需要制作自己的 Hits
组件,您可以在其中更改用于显示每次点击结果的属性名称。值得庆幸的是,这并不太复杂。请参阅 connectHits.
当您遍历命中时,查看每个命中的 _highlightResult
属性 以查看两个属性中的哪一个匹配。然后,当您创建 <Highlight />
组件时,将 attributeName
属性 设置为正确的属性。所以你有这个:
<Highlight attributeName='phoneFormat' hit={hit}/>
或者这样:
<Highlight attributeName='phoneNoFormat' hit={hit}/>