AI-Search Results Processing

Using the ChatBar AI searchResultsCallback

Below is some example code that will, if enabled in your configuration, process the search results that are passed back after sending your AI-Search query. The HTML layout we use for the example is shown at the bottom of this page.

In order that your webpage processes the search results you must provide a javascript processing function. In the example here the function is called searchResultsCallback . This function is passed to the initialisation code as a callback as described here.

When the searchResultsCallback is called it receives a JSON array of search results in the format shown below.

Javascript callback example

    var searchResultsEle;
    var aiSearchContainer;

    function initSearchElements(){
        searchResultsEle = document.getElementById('searchResults');
        aiSearchContainer = document.getElementById('ai_search_container');        
    }

    searchResultsCallback = function(search_results) {

        // Sort the search results by score
        search_results.sort(function(a, b) {
            return a.score - b.score;
        });

        search_results.forEach(function(sr) {
            addPageBox(sr);
        });
    };

    function addPageBox(sr) {

        var descHTML = "";
        var imageHTML = "";

        if (sr.image) {
            imageHTML = "<img src='" + sr.image + "' alt='image'>";
        }
        if (sr.description) {
            descHTML = '<p class="desc">' + sr.description + '</p>';
        }
        if (sr.score) {
            descHTML += '<div class="score">' + (sr.score * 100).toFixed(2) + '%</div>';
        }

        var div = document.createElement('div');
        div.classList.add('resultWrapper');
        div.innerHTML = "<a class='linkBox' href='" + sr.source + "'>" + 
            imageHTML + "<p class='title'>" + sr.title + "</p>" + descHTML + "</a>";
        
        searchResultsEle.appendChild(div);
        aiSearchContainer.classList.add('active');

        // Do any post processing here, eg. scroll the container
        // postProcess();
    }

JSON format of search results

    {
        "title": "META Title of page",
        "description": "META Description of page",
        "image": "URL of the meta image",
        "source": "URL of the page"
    }

HTML layout for example

<div id="ai_search_container" class="flexRow">
  <div id="searchList" class="aiContentCol item">
    <div class="portraitWrapper">
      <div class="portrait"></div>
    </div>
    <div id="searchResults"></div>
  </div>
  <div class="item center">
    <div id="auto_ai_search_bot">
      <p>AI Search is loading...</p>
    </div>
  </div>
</div>