@shopify/theme-predictive-search-component

Description

Predictive search UI state component.

Dependency

@shopify/theme-predictive-search

Example

const predictiveSearch = new PredictiveSearch({
  selectors: {
    input: '[data-predictive-search-input="header"]',
    reset: '[data-predictive-search-reset="header"]',
    result: '[data-predictive-search-result="header"]'
  },
  resultTemplateFct: data => {
    return `
      <div class="predictive-search">
        <ul class="predictive-search__list">
          ${data.products.map(
            product => `
            <li data-search-result> <!-- important to add the data-search-result attribute to each result -->
              <img src="${product.image}" alt="${product.title}" />
              <span>${product.title}</span>
            </li>
          `
          )}
        </ul>
      </div>
    `;
  },
  // (a11y) Function to return the number of results that you will display.
  // This will be announced to the user via an aria-live.
  numberOfResultsTemplateFct: data => {
    if (data.products.length === 1) {
      return "one result found";
    } else {
      return "[results_count] results found".replace(
        "[results_count]",
        data.products.length
      );
    }
  },
  // (a11y) Return a string that indicates that we're loading results.
  // This will be announced to the user via an aria-live.
  loadingResultsMessageTemplateFct: () => {
    return "loading";
  },
  onInputFocus: nodes => {
    // You can get a reference to active target
    console.log(nodes.input.id); //-> input
    console.log(nodes.submit.id); //-> submit
    console.log(nodes.result.id); //-> result
  },
  onInputKeyup: nodes => {
    return true; // This will allow the event callback to execute
  },
  onInputBlur: nodes => {
    return false; // This will prevent the event callback to execute
  },
  onInputClear: nodes => {},
  onBeforeKill: nodes => {},
  onBeforeOpen: nodes => {},
  onOpen: nodes => {},
  onBeforeClose: nodes => {},
  onClose: nodes => {},
  onDestroy: nodes => {}
});

// Public methods
predictiveSearch.open();
predictiveSearch.close();
predictiveSearch.destroy();
predictiveSearch.clearAndClose();