Блог

Я создаю веб-сайт с помощью React и использую на нем algolia instantsearch. Мне удалось создать страницу поиска, на которой отображаются все результаты и фильтры по поиску. Я хочу использовать ввод внешнего поиска с другой страницы в режиме мгновенного поиска.

Я бы хотел, чтобы страница результатов поиска отображалась уже отфильтрованной по входному параметру поиска. Я уже создал такую страницу, как (https://url/search/q=name) но страница результатов не принимает параметр. Мгновенный поиск отображает все результаты.

Как я могу этого достичь? Любые рекомендации или ссылки, которые я смогу прочитать, будут оценены по достоинству.

Мой код выглядит так :

 
import algoliasearch from "algoliasearch/lite";

var url_string = window.location.protocol   "//"   window.location.host   "/"   window.location.pathname   window.location.search;

var url = new URL(url_string);

var q = url.searchParams.get("q");

const searchClient = algoliasearch(
  "xxxxxxxxxx",
  "xxxxxxxxxxxxxxxxx"
);

function BusinessesSection({ busData }) {

  var stateMapping = {
    stateToRoute(uiState) {
      const indexUiState = uiState['Test'];
      return {
        query: indexUiState.query,
        page: indexUiState.page,
        // ...
      };
    },
  
    routeToState(routeState) {
      return {
        ['Test']: {
          query: routeState.query,
          page: routeState.page,
          // ...
        },
      };
    },
  };

  const Hit = ({ hit }) => (
    <Item.Group divided key={hit.id}>
      <Item fluid>
          
        <Item.Header> {hit.name} </Item.Header>
        <Item.Description> {hit.business_json.description} </Item.Description>

        <Button onClick={() => { handleSingle(hit);}}> View More </Button>
      </Item>
    </Item.Group>
  );

  return (
    <div>
      <InstantSearch
        searchClient={searchClient}
        indexName="Test"
        routing = {
          stateMapping = function (uiState) {
            return {
              q: uiState['Test'].query,
            }
          },
          stateMapping.routeToState = function (routeState) {
            return {
              query: routeState.q
            }
          }
        }
      >
      
      </InstantSearch>
    </div>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BusinessesSection);

 

Чтобы иметь поиск по умолчанию в поле поиска, можно использовать defaultRefinement параметр в виджете Поле поиска React InstantSearch. Вы можете добавить сюда значение вашего внешнего поискового ввода, и тогда он будет работать из коробки.

 <SearchBox
    defaultRefinement={q}
    translations={{
    placeholder: "Search …"
}}
 

Значение по умолчанию-это строка