Implementing Popular Searches & Categories

By default, the Tweakwise search bar stays empty and hidden until a user types at least one character. However, many users rely on the search bar as their primary navigation tool, even when they do not have a specific term in mind.

By proactively presenting Most Popular Search Terms, Most Popular Categories or Most Recent Search Terms during this zero-input state, you reduce search fatigue, inspire shoppers, and establish a high-converting UX pattern standard among top e-commerce players.

Tweakwise does not currently offer an API that returns this data, this article explains how to implement this manually, bridging your frontend autocomplete component with custom-sourced popularity data while keeping the Suggestions internals (like Insights) intact.

window.addEventListener("twn.suggestions.ready", function () {

  window.tweakwiseSuggestions({
    // regular suggestions configuration
  });


  // 2. Your Local Data
  const localData = {
    recentSearches: ['Shoes', 'Winter Jacket', 'Backpack'],
    popularSearches: ['Summer Dress', 'Sneakers', 'Sunglasses']
  };

  const searchInput = document.querySelector("#tweakwise-input");

  // 3. Focus and Blur Handlers for Local Data
  searchInput.addEventListener('focus', function () {
    // Only show if the user hasn't typed anything yet
    if (this.value.trim() === "") {
      showLocalSuggestions(localData);
    }
  });

  searchInput.addEventListener('input', function () {
    // If the user starts typing, hide your local data so Tweakwise results can take over
    if (this.value.trim() !== "") {
      hideLocalSuggestions();
    } else {
      showLocalSuggestions(localData);
    }
  });

  // Hide when clicking outside
  document.addEventListener('click', function (e) {
    if (!e.target.closest('#tweakwise-input') && !e.target.closest('#local-suggestions-overlay')) {
      hideLocalSuggestions();
    }
  });

});

function showLocalSuggestions(data) {
  let overlay = document.getElementById('local-suggestions-overlay');

  // Create overlay if it doesn't exist
  if (!overlay) {
    overlay = document.createElement('div');
    overlay.id = 'local-suggestions-overlay';
    // Style it or match Tweakwise CSS classes to blend in seamlessly
    overlay.style.position = 'absolute';
    overlay.style.zIndex = '9999';
    // Insert it directly after or below the search input wrapper
    document.querySelector('#tweakwise-input').parentNode.appendChild(overlay);
  }

  // Generate HTML based on your data structure
  overlay.innerHTML = `
    <div class="twn-suggestions-group">
      <div class="twn-suggestions-group__title">Recent Searches</div>
      <ul>
        ${data.recentSearches.map(term => `<li class="local-item" onclick="setSearchValue('${term}')">${term}</li>`).join('')}
      </ul>
    </div>
    <div class="twn-suggestions-group class="twn-suggestions-group">
      <div class="twn-suggestions-group__title">Popular Searches</div>
      <ul>
        ${data.popularSearches.map(term => `<li class="local-item" onclick="setSearchValue('${term}')">${term}</li>`).join('')}
      </ul>
    </div>
          `;
  overlay.style.display = 'block';
}

function hideLocalSuggestions() {
  const overlay = document.getElementById('local-suggestions-overlay');
  if (overlay) overlay.style.display = 'none';
}

function setSearchValue(term) {
  const input = document.querySelector("#tweakwise-input");
  input.value = term;
  hideLocalSuggestions();
  // Trigger Tweakwise or submit search form
  input.dispatchEvent(new Event('input', { bubbles: true }));
}