Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to quickly build an excellent React search experience". In daily operation, I believe many people have doubts about how to quickly build an excellent React search experience. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts of "how to quickly build an excellent React search experience"! Next, please follow the small series to learn together!

Search Engine: Elastic App Search

Elastic App Search is available as a paid hosted service or free self-managed distribution. In this tutorial, we'll be using hosted services, but keep in mind that if you host yourself, your team can use Search UI and App Search with a basic license.

Plan: Index documents representing the best video games of all time into search engines, then design and optimize the search experience to search for them.

First, sign up for a 14-day trial period-no credit card required.

Create an engine. There are 13 different languages available.

We named it video-games and set the language to English.

Download the best video games data set and upload it to app search using the importer.

Next, click Engine and select the Credentials tab.

Create a new public search key with limited engine access to access only the video-games engine.

Retrieves this new public search key and your host identifier.

It may not seem like much, but we now have a fully functional search engine that uses an optimized search API to search our video game data.

Here are the actions we have completed so far:

Created a search engine.

Collected documents

Default schema created

Retrieves scoped one-time credentials that can be exposed to browsers

These are the actions that have been done so far for app search.

Let's start building the search experience using the Search UI.

Search Library: Search UI

We will use the create-react-app bracket utility to create React apps:

On top of that, we'll install the Search UI and App Search Connector:

Launch the app in development mode:

Open src/App.js using your favorite text editor.

We'll start with some sample code and unpack it.

Note the remarks!

Step 1: Import statements

We need to import Search UI dependencies and React.

Core components, connectors, and view components are contained in three different packages:

@elastic/search-ui-app-search-connector

@elastic/react-search-ui

@elastic/react-search-ui-views

As the course progresses, we will learn more about each package.

In addition, we'll import default stylesheets for this project, so we don't have to write our own CSS lines to get a good look and feel:

Step 2: Connectors

We obtained the public search key and host identifier from App Search.

Now is the time to use them!

Connector objects in the Search UI hook up with app search using credentials and support search:

Search UI works with any search API. But with connectors, the search API doesn't require any deeper configuration to work properly.

Step 3: configurationOptions

Before delving into configurationOptions, let's take a moment to think about it.

We imported a set of data into the search engine. But what kind of data is this?

The more we know about data, the more we know how to deliver it to searchers and how to configure the search experience.

Let's look at an object that is the best object in this dataset:

We see that it has several text fields like name, year, platform, and so on and some number fields like critic_score, global_sales, and user_score.

If we ask three key questions, we’ll know enough to build a solid search experience:

How will most people search? By the name of the video game.

What will most people want to see in a result? The name of the video game, its genre, publisher, scores, and its platform.

How will most people filter, sort, and facet? By score, genre, publisher, and platform.

We then can translate those answers into our configurationOptions:

Now that we've connected the Search UI to the search engine, let's choose how to manage search data, display results, and browse results. However, we needed something to tie everything together with the dynamic front-end component of the Search UI.

Step 4: SearchProvider

This is the object that controls everything. SearchProvider is where all other components are nested.

The Search UI provides a Layout component for drawing typical search layouts. There are also some in-depth customization options, but we won't go into them in depth in this tutorial.

We're going to do two things:

HarmonyOS Technology Community

Pass configurationOptions to SearchProvider.

Put some structural building blocks into Layout and add two basic components: SearchBox and Results.

At present, we have completed the basic setup work on the front end. There are a few extra details on the back end that need to be worked out before we can run. We should also look at relevance models to fine-tune the search to the unique needs of the project.

Exit to App Search…

back at the lab

App search has powerful and optimized search engine features that make once-complex adjustments more interesting. Fine correlation adjustments and seamless schema changes can be performed with a few clicks.

We'll first tweak the architecture to see how it actually works.

Log in to the app search engine and click Schema under the Manage section.

The schema is displayed. Each of the 11 fields defaults to text.

In the configurationOptions object, we define two scope facets to help search by number: user_score and critical_score. For range facets to work as expected, the field type needs to be set to numeric.

Click the drop-down menu next to each field, change it to number, and click Update Types:

The engine reindexes immediately. Later, when we add faceted components to the layout, the range filter will work as we expect. Now, let's look at the really useful features.

This section is very important.

There are three key relevance functions: synonyms, management, and relevance adjustment.

Select each feature under the Search Settings section in the sidebar:

synonyms

Some people drive cars, some people drive cars, and some people may drive old cars. The Internet is global, and people around the world use different words to describe things. Synonyms help you create a set of terms that are considered the same.

In the case of video game search engines, we know that people want to find Final Fantasy. But they might just type FF.

Click Synonyms, select Create a Synonym Set, and enter these terms:

Click Save. You can add as many synonyms as you want.

The search FF will now have the same weight as the search Final Fantasy.

management

Administration is the most popular feature. If someone searches for Final Fantasy or FF, what happens? There are a lot of games in this series, which outcome will they get?

By default, the top five results are displayed as follows:

1.Final Fantasy VIII

2.Final Fantasy X

3.Final Fantasy Tactics

4.Final Fantasy IX

5.Final Fantasy XIII

Final Fantasy VII is the best game in Final Fantasy, and Final Fantasy XIII is not a very good game! ?

Can we get Final Fantasy VII listed first for people searching Final Fantasy? Can Final Fantasy XIII be removed from the results?

We can do this!

Click Curations and enter the query: Final Fantasy.

Next, drag the Final Fantasy VII document up to the Promoted Documents section by holding down the leftmost handle of the table. Then, click the Hide Result button on the Final Fantasy XIII document-Eye icon with a through line:

Now, searching for Final Fantasy or FF will see Final Fantasy VII at the top of the list.

I don't see Final Fantasy XIII anymore. Ha ha!

We can promote and hide multiple documents. We can even sort promoted documents to have complete control over what appears at the top of each query.

correlation adjustment

Click Relevance Tuning in the sidebar.

We search for a text field: the name field. But what if we have multiple text fields to search for (such as name and description fields)? The video game dataset we're using doesn't contain a description field, so we'll fake some documentation to take this field into account.

Suppose the document looks like this:

If someone wanted to find the game Magical Quest, they would enter it as a query. But the first result will be Dangerous Quest:

Why is that? This is because the word "magical" appears three times in the description of Dangerous Quest, and search engines don't know that this field is more important than another field. So it puts Dangerous Quest higher up the list. This is why correlation adjustments are needed.

We can select a field among others and increase its relevance weight:

We can see that after increasing the weight, the correct term Magical Quest rises to the top because the name field becomes more important. All we have to do is drag the slider to a higher value and click Save.

Now, we use App Search to do the following:

Adjust the schema by changing user_score and critical_score to number fields.

Fine tune the correlation model.

So that's it for these clever and sophisticated dashboard features-each feature has a matching API endpoint that you can use to run each feature programmatically if you don't like GUIs.

Now, let's finish introducing the Search UI.

finishing touches

Your UI should now work properly. Try a few queries and see what happens. First of all, we lack tools to explore our results, such as filtering, faceting, sorting, etc., but can search. We need to enrich the UI.

In the initial src/App.js file, we imported three basic components:

Depending on what we define for configuration options, let's add a few more components.

Importing the following components enables functionality missing from the UI:

PagingInfo: Displays information on the current page.

ResultsPerPage: Configure the number of results displayed on each page.

Paging: Navigating different pages.

Facet: Filter and browse data in ways that are specific to data types.

Sorting: Reschedule the results of a given field.

Once imported, components can be placed in Layout.

The Layout component divides the page into sections into which components can be placed through attributes.

It consists of the following sections:

Header: Search box/search bar

bodyContent: container of results

sideContent: sidebar with faceted and sorting options

bodyHeader: Context-rich information surrounding the results, such as the current page and the number of results on each page

bodyFooter: Pagination option for quick navigation between pages

Component renders data. The data is retrieved according to the search settings we provide in configurationOptions. Now we put each component into its corresponding Layout section.

For example, we described five Facet dimensions in configurationOptions, so we will create five Facet components. Each Facet component will use a "field" attribute as the key to return data.

We put them, along with the Sorting component, in the sideContent section, and then put the Paging, PagingInfo, and ResultsPerPage components in the section where they fit best:

Now, let's look at the search experience in a native development environment.

Much better! We have a lot of options to browse search results.

We've added some extra features, such as multiple sorting options and making publisher facets filterable by adding a single flag. Try searching with an empty query to explore all options.

Finally, let's look at the last feature of the search experience. It's popular.

Autocomplete function.

autocomplete

Searchers love auto-completion because it provides instant feedback. Its recommendations come in two ways: results and queries. Depending on how, searchers will receive relevant results or generate potential queries for results.

We'll focus on autocomplete query suggestion forms.

This requires two quick changes.

First, you need to add autocomplete to the configurationOptions object:

Second, you need to enable auto-completion as a function of SearchBox:

All right, that's it.

Try searching. Autocomplete query suggestions are displayed as you type.

At this point, the study of "how to quickly build a great React search experience" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.