Hybrid Search — UI Customization

Change the headings, the parts and the order of the search page, and choose when each part shows.

The quick start writes the page with the SDK's template helper. Below we change the text it writes, remove a part, put the answer in a box that opens, and then take over the HTML. Last, visible-when decides when each part shows.

You need a working Hybrid Search page first. See Hybrid Search — Quick Start.

How the template builds the page

MisoClient.ui.defaults.hybridSearch.templates.root(options) returns the HTML of the whole page: the query box, the answer with its sources, and the search results with their filters. The quick start puts it in the page as it is.

Change the headings

Pass your own text in phrases:

const templates = MisoClient.ui.defaults.hybridSearch.templates;

const root =
  document.querySelector("#miso-hybrid-search-combo");
root.innerHTML = templates.root({
  phrases: {
    keywords: "Results for “${value}”",
    sources: "Read more",
  },
});

${value} marks where the question, the search text or the number of results goes. Write the phrase in plain quotes, not in backticks, so that JavaScript leaves ${value} for the SDK to fill.

Add or remove a part

The template returns a string, so you can change the string before it goes into the page. This removes the sort order selector:

const templates = MisoClient.ui.defaults.hybridSearch.templates;

const root =
  document.querySelector("#miso-hybrid-search-combo");
root.innerHTML = templates
  .root()
  .replace("<miso-sort></miso-sort>", "");

Add a part the same way: find an element in the string, and put your HTML before or after it.

Put the answer in a box

With answerBox: true, the answer shows in a box of fixed height, with a Show more button that opens it. The box needs wireAnswerBox to show and open:

const defaults = MisoClient.ui.defaults.hybridSearch;

const root =
  document.querySelector("#miso-hybrid-search-combo");
root.innerHTML = defaults.templates.root({ answerBox: true });
defaults.wireAnswerBox(client, root);

The box hides when Miso has no answer to the question. To show it anyway, pass hideWhenUnanswerable: false. To change the button text, pass phrases:

defaults.wireAnswerBox(client, root, {
  hideWhenUnanswerable: false,
  phrases: { showMore: "Read the full answer", showLess: "Show less" },
});

Write the HTML yourself

To change the order, start from the HTML that root() returns. Print it in the browser console on a page that loads the SDK:

console.log(MisoClient.ui.defaults.hybridSearch.templates.root());

Put the HTML in the page, inside the container, and edit it there. Then remove the root.innerHTML line from your script. This version puts the search results first and the answer after them, and leaves out the filters:

<div id="miso-hybrid-search-combo" class="miso-hybrid-search-combo">
  <section class="miso-hybrid-search-combo__section miso-hybrid-search-combo__question">
    <miso-hybrid-search class="miso-hybrid-search-combo__query-container miso-circled-citation-index" logo="false">
      <miso-query></miso-query>
    </miso-hybrid-search>
  </section>
  <section class="miso-hybrid-search-combo__section miso-hybrid-search-combo__search-results">
    <miso-hybrid-search class="miso-hybrid-search-combo__search-results-container miso-circled-citation-index" visible-when="loading ready" logo="false">
      <div class="miso-hybrid-search-combo__search-results-info">
        <div class="miso-hybrid-search-combo__phrase-inline miso-hybrid-search-combo__keywords-phrase">You searched for “<miso-keywords></miso-keywords>”</div>
        <div class="miso-hybrid-search-combo__phrase-inline miso-hybrid-search-combo__total-phrase"><miso-total></miso-total></div>
      </div>
      <miso-products></miso-products>
    </miso-hybrid-search>
  </section>
  <section class="miso-hybrid-search-combo__section miso-hybrid-search-combo__answer">
    <miso-hybrid-search class="miso-hybrid-search-combo__answer-container miso-circled-citation-index" visible-when="ready !unanswerable" logo="false">
      <div class="miso-hybrid-search-combo__phrase miso-hybrid-search-combo__question-phrase">You asked “<miso-question></miso-question>”</div>
      <miso-answer></miso-answer>
      <miso-feedback></miso-feedback>
    </miso-hybrid-search>
    <miso-hybrid-search class="miso-hybrid-search-combo__sources-container miso-circled-citation-index" visible-when="nonempty" logo="false">
      <h3 class="miso-hybrid-search-combo__phrase miso-hybrid-search-combo__sources-phrase">Sources</h3>
      <miso-sources></miso-sources>
    </miso-hybrid-search>
  </section>
</div>

Keep these when you edit:

Show a part at the right moment

The visible-when attribute shows an element only in the states it names. Put it on a <miso-hybrid-search>, or on an element inside one. The template uses it on each part. The search results have visible-when="loading ready", so they stay hidden until the first search starts.

• Separate values with spaces to show the element in any of them: visible-when="initial loading".
• Join a state to empty or nonempty with + to need both: visible-when="ready+empty".
• Only the Miso elements that show data count toward empty and nonempty. The query box and the buttons do not.
• The SDK shows the element with display: block !important. To lay it out as a flex row or a grid, put visible-when on a wrapper around it.

Hybrid Search adds one more value, !unanswerable. It hides the element when Miso has no answer to the question. Use it after a value that shows the element, as the answer does with visible-when="ready !unanswerable". To keep the answer in view when there is no answer, remove !unanswerable.

To show a message when the search fails, add this to the page:

<miso-hybrid-search visible-when="erroneous" logo="false">
  <miso-error></miso-error>
</miso-hybrid-search>

If it does not work

Next

• Results and Sources — where the links open, the date format, and the fields and layout of each list.
• Facets — the category filters next to the results.
• Citation Links — the class, the attributes and the tooltip of each citation.
• Live Showcase — the layouts you can build.