Enabling TypeAhead for Search Boxes

About

To enable TypeAhead for Search Boxes, you must perform two actions:

1. First, prepare your SmartHub instance for the integration of TypeAhead for Search Boxes with your SmartHub site pages.
2. Second, load the integration onto all of your SmartHub site pages.

Use the topics below to perform both of these actions before continuing to Creating a SmartHub Results Page in WordPress.

How to Prepare SmartHub for the Integration

First, you create your own custom settings using the provided SmartHub TypeAhead settings template files. See the steps below.

For more information on how to set up a custom folder with custom settings files and pages, see How to Customize Your SmartHub User Interface.

1. Copy the following files from the <SmartHub installation>\integrations\typeAheadForSPO directory to your own custom folder (such as <SmartHubRoot>\MyCustomerCustomizations):
   
   1. NewCustomSettingsTemplate.js
   2. NewResultsPageSettings.js
2. The "NewCustomSettingsTemplate.js" file is used the custom settings file used to configure the Type-ahead component - like what providers should be used, the selector for the searchbox that it should attach to in the UI etc
   
   
3. Edit the "NewCustomSettingsTemplate.js" and change the SearchBoxInputSelector and SuggestionsContainerParentSelector to point to the correct elements on the page - the following sample values work for most of the themes:
   1. SearchBoxInputSelector: form[role='search'] input[type='text'],form[role='search'] input[type='search']
   2. SuggestionsContainerParentSelector: form[role='search']
      
      
      
      
4. Edit the "NewResultsPageSettings.js" file from the new location and change the SmartAnalyticsURL and SmartHubAddressto point to your SmartHub instance:
   
   

How to Load the Integration on All Pages

1. Navigate to the functions.php file that you previously created in the steps here.
   
   
2. Append the following snippet to the functions.php file and modify all smarthub.contoso.com URLs to point to your SmartHub instance URL.
   1. Make sure to modify the URLs to point to your copy of "NewCustomSettingsTemplate.js" and "NewResultsPageSettings.js."
   SmartHub TypeAhead JS integration snippet

   Copy

   function smarthub_hook_javascript() {
       ?>        <script>            var shMain = document.createElement("div")
   
               shMain.id = "search";
   
               shMain.style.display = "none";
   
               shMain.classList.add("BAInsightCustom");
               shMain.classList.add("CoveoSearchInterface");
   
               shMain.setAttribute("data-enable-debug-info", "false");
               shMain.setAttribute("data-auto-trigger-query", "false");
               shMain.setAttribute("data-hide-until-first-query", "false");
               shMain.setAttribute("data-enable-duplicate-filtering", "true");
               shMain.setAttribute("data-enable-history", "true");
               shMain.setAttribute("data-design", "new");
   
               document.body.append(shMain);
   
               var searchForms = document.querySelectorAll("form[role='search']");
               for(var i = 0, l = searchForms.length; i < l; i++){
                   searchForms[i].classList.add("BAInsightCustom");
               }
           </script>        <script>            window.SHRootLevelURL = "";
               const customSettingsFile = "https://smarthub.contoso.com/customer/TypeAheadForSPO/NewCustomSettingsTemplate.js" 
               const neverCachedJS = [
                   "https://smarthub.contoso.com/customer/TypeAheadForSPO/NewResultsPageSettings.js",
                   customSettingsFile,
                   "https://smarthub.contoso.com/modules/SmartHubResourceLoader/SmartHubResourceLoader.js"            ]
    
               const now = new Date().getTime()
    
               neverCachedJS.forEach(function (src) {
                   const script = document.createElement('script')
                   script.src = src
                   script.async = false
                   document.head.appendChild(script)
               });
               
               document.addEventListener("shLoaderReady", function() { SH.ResourceLoader.loadResources(); });
   
           </script>    <?php
   }
   add_action('wp_head', 'smarthub_hook_javascript');

How to Validate the Integration

1. Navigate to any of your site pages and perform a search.
   
   
2. The TypeAhead is dispayed with suggestions.
   
   
3. Pressing the search button or the Enter key on your keyboard opens the custom search page that you previously configured where you can see the embedded SmartHub Results (HTML) page.