Skip to main content

Search autocomplete settings

In this section, you can configure the search autocomplete settings. The Search autocomplete settings are located at Stores -> Configuration -> Mirasvit extensions -> Search autocomplete, and consist of the following sections:

Autocomplete base configuration​

Define core settings for the autocomplete functionality, including performance and search behavior.

  • Start search after (number of characters): specifies the minimum number of characters that customers need to enter to trigger autocomplete. The default required value is 3

  • Autocomplete delay (ms): specifies the delay, in milliseconds, between triggering autocomplete and the start of the actual search

    tip

    Our extension begins searching for possible autocompletions and offers suggestions only when both of the following conditions are met:

    • The customer has entered the minimum required number of characters
    • No actions have occurred during the specified delay period

  • Enable fast mode: speeds up autocomplete search, but increases the indexing time of the search index and is not available for MySQL or other search engines, except for the Elasticsearch and OpenSearch engines.

  • Searchable content: specify which search indexes will be visible in autocomplete and set the number of results to be shown for each. Drag and drop the indexes to set the display order. The grid contains the following settings:

    • Index: the name of the index that can be included in autocomplete
    • Is enabled: indicates whether the current index is included in autocomplete
    • Max number of results: the maximum number of results to be displayed in the autocomplete drop-down widget

  • Enable predictive search (TypeAhead): enables the auto-suggestion feature. Our extension collects data on the most popular search queries and their results, groups them, and stores them separately. When autocomplete is triggered and the TypeAhead option is enabled, our application automatically searches for the typed term and displays suggestions for the most relevant query found.

    tip

    Use the Right Arrow button to quickly convert auto-suggestion into a full autocomplete query, saving autocomplete time.

Appearance and layout​

Control the visual presentation and layout of autocomplete search results.

  • Autocomplete dropdown layout: defines the structure of the autocomplete result list:

    • 1 Column: all indexes display in one column
    • 2 Columns: product index results and other results display in two different columns
    • Full size: autocomplete results fit your screen size

  • Additional CSS styles: custom CSS styles can be applied either to the entire drop-down or to individual product cells. This is an extremely powerful tool that allows you to adapt our Autocomplete extension to almost any theme Add CSS rules to customize the appearance of autocomplete suggestions.

    example

    To customize individual product cell in autocomplete drop-down, use the following expression:

    .searchautocomplete__item-magento_catalog_product
    {
    // Your extended styles
    }

    It will be added to our stylesheet.

    To make the autocomplete dropdown scrollable and smaller for mobile devices add the css styles below to the Additional CSS styles field:

    example
    @media screen and (max-width: 767px) {
      .mst-searchautocomplete__autocomplete {
        max-height: 200px;
        overflow-y: scroll;
      }
    }

    max-width: 767px - is the maximum width of the device for which these styles are applied.

Product display settings​

Define which product details (e.g., price, thumbnail, rating) are shown in the autocomplete suggestions for individual product cells.

tip

To include or exclude tax from the product price, navigate to Stores -> Settings -> Configuration -> Sales -> Tax -> Price Display Settings. Then, change the option Display Product Prices in Catalog to Excluding Tax to show prices without taxes, or select another option to display prices including tax.

  • Show price: displays the price or price range of products. Only the final price of the product will be shown if Fast mode is enabled
  • Price retrieval method: choose how product prices are fetched. Appear if Show price is enabled:
    • Retrieve from the database (Fast)
    • Retrive using Magento (Only final price)
    • Retrive using Magento (Default display mode)
  • Show thumbnail: enables a small thumbnail of the product image
  • Show rating: enables the number of reviews and the approval rating (also known as the star rating)
  • Show description: enables a short excerpt from the product description
  • Show SKU: enables the SKU of the product
  • Show "Add to cart": enables a shortcut button for quickly adding products to the cart
  • AJAX "Add to cart" button: enables the AJAX method for the button, appearing when Show Add to cart is enabled
  • Show stock status: enables the product's stock status

Configure how popular search queries are displayed in autocomplete suggestions. Popular suggestions are the most frequently requested queries by customers. If a current customer request matches one of these queries, autocomplete can highlight them and bring them to the top of the drop-down.

  • Show popular search suggestions: enables suggestions based on the most common search queries

  • Max number of suggested queries: the maximum allowed number of Popular Suggestions that should be displayed on the autocomplete drop-down

  • Popular search queries list: enter comma-separated keywords to force specific queries to appear as popular suggestions. Leave empty to show the most popular queries

    example

    hoodies,watches,men shorts,women fitness tee,capri

  • Ignore suggestions by words: enter comma-separated keywords to exclude certain keywords from popular suggestions

    example

    hoodie,bag,watches

The extension has received popular suggestions from the core Magento Search Terms data. These entries may be inaccurate or irrelevant. You can review and remove such entries in the Marketing -> SEO & Search -> Search Terms section.