Loading

Configure and Run Search UI

Stack Serverless

Next lets configure Search UI for our needs! Navigate to the config within app.js and update the following:

const config = { searchQuery: { search_fields: { title: { weight: 3 }, plot: {}, genre: {}, actors: {}, directors: {} }, result_fields: { title: { snippet: {} }, plot: { snippet: {} } }, disjunctiveFacets: ["genre.keyword", "actors.keyword", "directors.keyword"], facets: { "genre.keyword": { type: "value" }, "actors.keyword": { type: "value" }, "directors.keyword": { type: "value" }, released: { type: "range", ranges: [ { from: "2012-04-07T14:40:04.821Z", name: "Within the last 10 years" }, { from: "1962-04-07T14:40:04.821Z", to: "2012-04-07T14:40:04.821Z", name: "10 - 50 years ago" }, { to: "1962-04-07T14:40:04.821Z", name: "More than 50 years ago" } ] }, imdbRating: { type: "range", ranges: [ { from: 1, to: 3, name: "Pants" }, { from: 3, to: 6, name: "Mediocre" }, { from: 6, to: 8, name: "Pretty Good" }, { from: 8, to: 10, name: "Excellent" } ] } } }, autocompleteQuery: { results: { resultsPerPage: 5, search_fields: { "title.suggest": { weight: 3 } }, result_fields: { title: { snippet: { size: 100, fallback: true } }, url: { raw: {} } } }, suggestions: { types: { results: { fields: ["movie_completion"] } }, size: 4 } }, apiConnector: connector, alwaysSearchOnInitialLoad: true };

In the above example, we configured the:

  • query fields to search on title, plot, genre, actors and directors using the text fields
  • result fields to display title, plot, genre, actors and directors using the text fields
  • facets to display genre, actors and directors using the keyword fields
  • we made the facets disjunctive for better user experience. The user can select more than one facet to expand their search.
  • autocomplete results to suggest results with the same query fields as main search + returning some fields for display.

For more information on configuration, visit the API configuration docs.

We are going to do several steps here:

  • update the <Searchbox /> component to configure autocomplete
  • remove sorting options
  • add a <Facet /> component for each facet field
  • update the <Results /> component to display all the fields
<div className="App"> <ErrorBoundary> <Layout header={ <SearchBox autocompleteMinimumCharacters={3} autocompleteResults={{ linkTarget: "_blank", sectionTitle: "Results", titleField: "title", urlField: "url", shouldTrackClickThrough: true }} autocompleteSuggestions={true} debounceLength={0} /> } sideContent={ <div> {wasSearched && <Sorting label={"Sort by"} sortOptions={[]} />} <Facet key={"1"} field={"genre.keyword"} label={"genre"} /> <Facet key={"2"} field={"actors.keyword"} label={"actors"} /> <Facet key={"3"} field={"directors.keyword"} label={"directors"} /> <Facet key={"4"} field={"released"} label={"released"} /> <Facet key={"5"} field={"imdbRating"} label={"imdb rating"} /> </div> } bodyContent={<Results shouldTrackClickThrough={true} />} bodyHeader={ <React.Fragment> {wasSearched && <PagingInfo />} {wasSearched && <ResultsPerPage />} </React.Fragment> } bodyFooter={<Paging />} /> </ErrorBoundary> </div>

Lets run the project with the command:

yarn start

and then view the results in the browser at http://localhost:3000/

search-ui

Lets recap of the steps we have covered:

  • we setup and configured the Elasticsearch index for our data
  • we indexed an example movie
  • we checked out the starter app and added the Elasticsearch connector
  • we configured the Elasticsearch connector to connect to our Elasticsearch index
  • we updated the Search UI configuration to specify the fields to be searchable, facetable
  • we updated the components to use these fields

Next you can add more data into the index, update the results view to display more fields, and deploy the app.