#165 - Typing Animation in a Search Bar

<!-- 💙 MEMBERSCRIPT #165 v0.1 💙 - TYPING ANIMATION IN A FUNCTIONAL SEARCH BAR -->
<script>

(function() {
  const searchInput = document.querySelector('[data-ms-code="search-bar"]');
  if (!searchInput) return;

  const suggestions = [];
  for (let i = 1; i <= 5; i++) {
    const suggestion = searchInput.getAttribute(`data-ms-suggestion-${i}`);
    if (suggestion) suggestions.push(suggestion);
  }
  if (suggestions.length === 0) return;

  let suggestionIndex = 0;
  let charIndex = 0;
  let typing;
  let isAnimating = false;
  let originalPlaceholder = searchInput.placeholder || '';

  function typeSuggestion() {
    if (!isAnimating) return;
    
    const current = suggestions[suggestionIndex];
    searchInput.placeholder = current.slice(0, charIndex++);
    
    if (charIndex <= current.length) {
      typing = setTimeout(typeSuggestion, 80);
    } else {
      setTimeout(eraseSuggestion, 1200);
    }
  }

  function eraseSuggestion() {
    if (!isAnimating) return;
    
    const current = suggestions[suggestionIndex];
    searchInput.placeholder = current.slice(0, --charIndex);
    
    if (charIndex > 0) {
      typing = setTimeout(eraseSuggestion, 40);
    } else {
      suggestionIndex = (suggestionIndex + 1) % suggestions.length;
      setTimeout(typeSuggestion, 500);
    }
  }

  function stopAnimation() {
    isAnimating = false;
    clearTimeout(typing);
    searchInput.placeholder = originalPlaceholder;
  }

  function startAnimation() {
    if (searchInput.value.trim() !== '') return;
    
    isAnimating = true;
    charIndex = 0;
    typeSuggestion();
  }

  // Event listeners
  searchInput.addEventListener("focus", stopAnimation);
  searchInput.addEventListener("blur", () => {
    if (searchInput.value.trim() === '') {
      setTimeout(startAnimation, 500);
    }
  });
  searchInput.addEventListener("input", () => {
    if (isAnimating) stopAnimation();
  });

  // Start animation after delay
  setTimeout(() => {
    if (searchInput.value.trim() === '' && document.activeElement !== searchInput) {
      startAnimation();
    }
  }, 2000);
})();

</script>