Algolia InstantSearch: как сделать поиск независимым от форматирования с помощью скобок?

Я пытаюсь сделать мгновенный поиск React, который позволяет вам искать телефонные номера. Они должны отображаться в следующем формате: «(123) 456-7890», но я хочу иметь возможность поиска с помощью «(123) 456-7890» или «1234567890».

Я думал, что могу просто сохранить его в отформатированном индексе, а затем терпимость к опечаткам позаботится о неформатированных запросах. Но я не получаю результатов с запросом «1234567890». Очевидно, это связано с тем, что форматирование разбивает число на три слова, а запрос состоит из одного слова. Как ни странно, это означает, что добавление круглых скобок не дает вам больше совпадающих символов при поиске, но их отсутствие может привести к тому, что запрос вообще не будет соответствовать.

Затем я попытался просто сохранить его как неформатированный (только цифры) в индексе. На этот раз совпадение получили как форматированные, так и неформатированные запросы. Но при вводе цифра за цифрой результат исчезает, когда я добираюсь до «(123)», и появляется снова, только когда я добираюсь до «(123) 456-7». Кажется разочаровывающим и странным пользовательским опытом вводить именно то число, которое показывает результат, и оно исчезает.

Я попытался добавить perens к необязательным настройкам слов, но это, похоже, не имело никакого эффекта. Я думаю, что если бы я мог заставить Algolia игнорировать perens и тире вместо того, чтобы заменять их пробелом, все это не было бы проблемой. Есть ли способ сделать это? Может быть, лучше найти способ отфильтровать запрос до того, как он будет отправлен в Алголию? Как мне это сделать?


reactjs search algolia formatting
person AddAppend    schedule 06.01.2017    source источник
comment
Не поможет ли индексация и форматированного, и неформатированного и отображение форматированного? { number_formatted: "(123)456-7890", number_unformatted: 1234567890 } Я только что попробовал, и каждый раз получалось совпадение.   -  person Jan Petr    schedule 06.01.2017

Ответы (1)


arrow_upward
2
arrow_downward

Сохраните 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}/>
person Josh Dzielak    schedule 06.01.2017