This is a GTM config for Easy Ask implemented for TNF to improve type ahead searching functionality on the website.

GTM-on-site-search-EasyAsk.js

<link type='text/css' rel="stylesheet" charset='utf-8' href='//{{Page Hostname}}/ns/thenorthface/easyask/sayt/{{eav}}/ea-sayt-{{eav}}.min.css'>

<script type = "text/javascript" >

  window.eaPath = window.eaPath || {};
window.eaPath.ns = "//{{url hostname}}/ns/thenorthface/easyask/sayt/{{eav}}/";
window.eaPath.sayt = window.eaPath.ns + "ea-sayt-{{eav}}.min.js";
window.eaPath.hbs = window.eaPath.ns + "ea-sayt-{{eav}}.hbs";

require(["jquery", "pubsub","shared.main.screen",window.eaPath.sayt],function($, pubsub, ms, eaDef){
    window.$ea = $;
    var $eaSearch = $(".topnav-search-input");
    var $eaSearchParent = $eaSearch.parent();
    $eaSearch.attr("id","search");
    require(["ea-sayt","domReady"],function(ea_sayt,domReady){
        $.pubsub("subscribe", "vfdp.topnav.sticky.minimized",function(){ $("body").addClass("topnav-sticky-min").removeClass("topnav-sticky-max"); });
    $.pubsub("subscribe", "vfdp.topnav.sticky.maximized",function(){ $("body").addClass("topnav-sticky-max").removeClass("topnav-sticky-min"); });
        domReady(function() {
          try{
            var $searchIcon = $('.topnav-search-button[type="submit"]');
            var options = {
        id: 'search',
        container: 'body',
        dict: 'v14northface',
        zIndex: '100',
        minLength: 2,
        server: '//v14northface.prod.easyaskondemand.com',
        serverSearch: '//v14northface.prod.easyaskondemand.com',
        prompt: 'Search',
        submitFctn: function(type,val){
          // emulate search button click.  Hope this helps.
          $searchIcon.click();
        },
                horizAlign:'right',
        products: {
                  size: 6,
                  value: function(item,field){
                    if (field == 'URL_Path'){
                      return "https://" + {{url hostname}} + "/shop/" + item[field] + "?variationId=" + item['Color_Code'];
                    }
                    return item[field];
                  },
                  fields : {
                    id: 'Partnumber',
                    colorCount: 'Color_Count',
                    rating: 'Average_Rating',
                    reviewCount: 'Review_Count',
                    thumbnail: 'Item_Thumbnail',
                    name: 'Style_Name',
                    price: 'MinPrice',
                    link: 'URL_Path',
                    headingOne: 'categories',
                    headingTwo: 'suggestions',
                    personalityCopy: "Here's what we found for:",
                    visualProductsTitle: 'top suggestions'
                  },
                  sizes : {
                    description : 115
                  }
        },
                template: window.eaPath.hbs,
                userSuggestions: true
            };
          var mobileOptions = {
                fixedWidth: function() { return  window.innerWidth },
                yOffset: 20,
                leftWidth:'100%',
                search:{
                  size: 5,
                  heading:{ display: 0 }
                },
                numCols: 1,
            };
            var desktopOptions = {
                yOffset: 8, //16,
                xOffset: 30 //47
//              fixedWidth: 500,
//        leftWidth:'60%',
            };
            options = ( main.screen.size() === "small" ) ? $.extend({}, options, mobileOptions) : $.extend({}, options, desktopOptions);
      $eaSearchParent.eaAutoComplete(options);
        
           //get elements from top navigation queries 
            var topNavMenuItems = document.querySelectorAll('.topnav-accordion-item');
            var $topNavSearchButton = $('.topnav-searchbutton');
            var $topNavSearchInput = $('.topnav-search-input');
            var $topNavSearchContainer = $('.topnav-search-container');
            var inputItems = document.querySelectorAll('input');
      
//////////////////////////CHRIS WEACHOCK'S SEARCH CODE IMPLEMENTATION BEGINS HERE////////////////////////
          //begin custom TNF function for search implementation. Set timeout to wait to check for when the vendor Easy ask is loaded on to the page  
          setTimeout(function(){   
              if ($eaSearchParent.data("ea_sayt").$suggestionContainer.length > 0){
                $('<div class="ea-background">').insertAfter( $eaSearchParent.data("ea_sayt").$suggestionContainer ); 
              }
              
            },250);
            
           /************
            MOBILE FUNCTNS
            *************/
           //create a matchMedia query for mobile functions 
          if (window.matchMedia("(max-width: 667px)").matches) {
          
        //create functions for showing the search results on mobile when the sarch icon is clicked, and replace the placeholder text
          var showEAMobileSearch = function(){
            //console.log("search button clicked!");
              $('body').addClass('ea-active');
              $topNavSearchInput.focus();
              $topNavSearchInput.attr('placeholder', 'Search The North Face');
          }
        //create a close function for closing the search. and clear the suggestions that were returned from the Easy ask search vendor
          var closeEASearch = function(){
               $eaSearchParent.data("ea_sayt").close();
               $eaSearchParent.data("ea_sayt").clearUserSuggestions();
               $topNavSearchInput.val(""); 
               $('body').removeClass('ea-active');
               $('body').trigger('click');//triggers click only on body to reset the search icon back to normal 
          }

        //create 2 event listeners, one for the search icon to show the search container and one that fires once 
        //to insert the close icon and on click of the close icon or focus of the input box close the search 
            $topNavSearchButton.on("click", showEAMobileSearch);
              
            $topNavSearchButton.one("click", function(){
              $('<div class="icon-close"></div>').insertAfter('.search');
              $('body.ea-active div.icon-close').on("click", closeEASearch);
              $('input, select').not($topNavSearchInput).on("focus", closeEASearch);
              
            }); 
            }
      
          /**************
            DESKTOP FUNCTNS
            ***************/
        //in these functions I handled looping through the navigation items and when you mouse over them close the search container
          if (window.matchMedia("(min-width: 640px)").matches) {
                for (var i=0; i< topNavMenuItems.length; i++){
                    // this handler will be executed every time the cursor is moved over the top level menu item
                    topNavMenuItems[i].addEventListener('mouseover', function(){
                      //testing log for function

                        //console.log('menu item hovered over');
                        $eaSearchParent.data("ea_sayt").close();

                    }, false);

                }// end for each top nav menu items
              
               //click event for search input box, if the input has a value and has content show the container
              $eaSearch[0].addEventListener('click', function(){
 
                if ($('.ea-autocomplete-wrapper>div').contents().length > 0){
                  //testing log for function click
                  //console.log('search results are showing');
                  $eaSearchParent.data("ea_sayt").$suggestionContainer.show();
                }
              //if the search input doesnt have any value in it clear the suggestions and close the container
                if ($eaSearch[0].value.length == 0){
                  //testing log for if search box is empty hide the search and clear it's user suggestions 
                  //console.log('search input is empty!');
                  $eaSearchParent.data("ea_sayt").clearUserSuggestions();
                  $eaSearchParent.data("ea_sayt").close();
                }

              }, false);
              
            } 
///////////////////////END CHRIS WEACHOCK'S SEARCH CODE IMPLEMENTATION BEGINS HERE///////////////////////////////  
      //end custom TNF search implementation 
          } catch (err) {
              var e = "Custom HTML - SAYT EasyAsk - " + err;
              dataLayer.push({'event':'tagError','tagName': e });
              console.error(e);
          } 
        }); // domReady
    }); // require ea-sayt
}); // require jquery
</script>