ReactiveSearch - не удается принудительно выбрать выделение (например, strictSelection) из автозаполнения? - PullRequest
Новая
       8

ReactiveSearch - не удается принудительно выбрать выделение (например, strictSelection) из автозаполнения?

0 голосов
/ 11 сентября 2018

Я следовал учебным пособиям по ReactiveSearch, и я использую его с React и размещенным экземпляром Elastic на Appbase.io.

Я хочу, чтобы пользователь видел автоматические предложения, но затем смог тольковыбрать из списка предложений (поэтому, если в списке предложений нет «foo», запрос не должен выполняться).

Это потому, что я не хочу получать результаты поискастраница, просто для того, чтобы приложение сразу переместило вас на нужную страницу в зависимости от выбранного значения.

Я думал, что смогу сделать это с strictSelection и onValueSelected , ноон по-прежнему позволяет проходить значение типа "foo" (которое не является значением автозаполнения). 

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { ReactiveBase, DataSearch } from "@appbaseio/reactivesearch";

class Main extends Component {
  render() {
    return (
      <div className="flex-col lighter">
        <ReactiveBase
          app="bravos"
          credentials="b8AuX6o06:19f6637f-0a80-48f7-8fe7-9fa0339b7c71"
        >
          <DataSearch
            className=""
            autosuggest={true}
            strictSelection={true}
            componentId="search"
            placeholder="Search Name/Ticker"
            dataField={["symbol", "name"]}
            onValueSelected={value => {
              document.location.href = `./${value}`;
            }}
          />
        </ReactiveBase>
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById("root"));

Ссылка Codesandbox: https://codesandbox.io/embed/wqjpoq25w

1 Ответ

0 голосов
/ 11 сентября 2018

Вы почти получили это. Здесь ключ с strictSelection также должен проверить причину выбора значения в onValueSelected docs :

onValueSelected вызывается всякий раз, когда выбирается предложение или поиск выполняется нажатием клавиши ввода. Он также передает причину действия и исходный объект, если причиной действия было «SUGGESTION_SELECT». Возможные причины:

SUGGESTION_SELECT '

ENTER_PRESS '

CLEAR_VALUE '

Этот API-интерфейс помогает в написании различных потоков для strictSelection. Вот как вы можете проверить выбор предложений: 

<DataSearch
  ...
  onValueSelected={(value, cause, source) => {
    if (cause === 'SUGGESTION_SELECT') {
      document.location.href = `./${value}`;
    }
  }}
/>

Демо

...