Search Configuration Settings Block for React

For each of the three fields, the best match any of its words has with the query or a synonym of it, from 0 to 1, times that field's weight, and the three are added. A word that is the query scores 1, a synonym 0.85, a word one letter off 0.5 when typo tolerance is Low or High, and a word that starts with the query 0.4 when it is High. So with the defaults a title match is worth up to 8, a tag match 5 and a body match 2. Equal scores keep the catalogue's order. The scoring is a plain function over the typed products and is shown to one decimal.

Each arrow compares a product's place now with its place under the saved settings: an up arrow and a number for places gained, a down arrow for places lost, nothing for a product that has not moved. Saving makes the current ranking the baseline, so the arrows clear. They are announced in words ("Up 2 places") for a screen reader, and the rows themselves never move in the page: a product changes place by its text changing in a fixed row.

A pair works both ways: "tee = t-shirt" lets a search for tee match t-shirt and the other way round. Type a pair and press Enter to add it; the field accepts two words and an equals sign, in either case, and turns away anything else or a pair that is already there, saying why under the field. Remove a pair with its x and the ranking drops the products that only it matched.

Edit CATALOG: each product has an id, a title, its tags and a body. QUERY is the query the ranking is for, SAVED the tuning the account has stored when the page opens, and TOLERANCES the three levels with the line shown for each. For a real index, replace scoreOf with your engine's own scoring, or call it for the top results of a real query.

Everything: the six products and the scoring are typed, nothing is indexed and nothing is sent. Save keeps the tuning in this page and says so. To make it real, send the weights, tolerance and synonyms to your search service when saving, and re-run a sample query against it to fill the ranking, so what you see is what searchers get.

The window keeps its height. The ranking is a compact list at the top, one line for each product, and the controls scroll under it, so a slider can be dragged with the result in view. Tab goes through the controls, then to the ranking, which can be scrolled with the arrow keys.