New Feature: Auto Suggest word search bar

[Newman2023]

Hello!

I need auto-type suggest feature in enterprise theme imported/added into the theme that I am using, empire theme. It was difficult to code it out. Do you know how to add/code this feature ?

https://themes.shopify.com/themes/enterprise/styles/digital/preview?surface_inter_position=1&surface_intra_position=2&surface_type=all

[Transcy]

Hello @Newman2023 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to header.liquid file

Add this code to create the search input field and the auto-type suggest dropdown

Add this code to handle the auto-type suggest functionality.

// In a separate JavaScript file or in a script tag within your theme (recommended)
document.addEventListener("DOMContentLoaded", function () {
  var searchInput = document.getElementById("search");
  var suggestionsContainer = document.getElementById("search-suggestions");

  searchInput.addEventListener("input", function () {
    var query = this.value.trim();

    if (query === "") {
      suggestionsContainer.innerHTML = "";
      return;
    }

    fetch("/search/suggest.json?q=" + encodeURIComponent(query))
      .then((response) => response.json())
      .then((data) => {
        var suggestions = data['suggestions'];
        var suggestionList = suggestions.map((suggestion) => {
          return "" + suggestion.value + "
";
        }).join("");
        suggestionsContainer.innerHTML = suggestionList;
      })
      .catch((error) => {
        console.error("Error fetching search suggestions:", error);
      });
  });
});

Go to Assets folder → base.css file → add this code to style the auto-type suggest

#search-suggestions {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.suggestion:last-child {
  border-bottom: none;
}

Save and preview

Hope this can help.

Transcy

[Newman2023]

Hello!

I need assistance with 1 feature, auto-type suggest feature in the empire theme added. It was difficult to code it out, my empire theme is not compiling this feature. Can you assist with the solution/code for this feature ?

Check the feature on the enterprise theme

https://themes.shopify.com/themes/enterprise/styles/digital/preview?surface_inter_position=1&surface…

[Newman2023]

My Empire Theme is not compiling this code/feature. I am not sure how to solve it.

[Gunny]

Thanks Transcy this works great for products!

Is there a way to auto complete with new Metaobjects functionality?

This article describes how to store custom data with Metaobjects: https://www.launchtip.com/how-to-create-a-custom-table-to-store-data-on-shopify/

which is useful for storing information not related to store inventory.

Thanks