Question

I would like the autocomplete to display a footer which says Displaying top 5 results only when there are 5 results actually being displayed.

So far, I have it set up so that it won’t display if at first there are less than 5 results, but once 5 results have been loaded the footer always displays, regardless of how many results are actually being displayed.

Please excuse the silly flip gimmick.

oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
         var sKey = sResultMatch

         // Extract the part of the match that the user did not type
         var sKeyRemainder = sKey.substr(sQuery.length);


         oAC.setFooter("");
         var aMarkup = ["<div class='myCustomResult'>",
                             "<span style='font-weight:bold'>",
                             sQuery,
                             "</span>",
                             sKeyRemainder,
                             "<br>",
                             "</div>"];

         if (oResultData[2] >= 4) {
            flip = true;
         }
         if (flip) {
            oAC.setFooter("<div style=\"margin-left:5px;\"><span style=\"font-weight:bold;\">See more results for " + sQuery + "</span><br>Showing top 5 results</div>");
         }
         return (aMarkup.join(""));
      };

Answer 1

Instead of trying to set it in the formatResult function, I tried using the doBeforeExpandContainer function, and it works like a charm.

oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
   var sKey = sResultMatch

   // Extract the part of the match that the user did not type
   var sKeyRemainder = sKey.substr(sQuery.length);


   oAC.setFooter("");
   var aMarkup = ["<div class='myCustomResult'>",
                       "<span style='font-weight:bold'>",
                       sQuery,
                       "</span>",
                       sKeyRemainder,
                       "<br>",
                       "</div>"];

   oAC.setFooter("<div class=\"ac-footer\"><div class=\"ac-footer-content\"><a class=\"ac-footer-link\" href=\"#\" onclick=\"spandex(this,event,'filter-company');return false;\">See more results for <b>" + sQuery + "</b></a><br><span class=\"ac-footer-sub\">Showing top 5 results</span></div></div>");

   return (aMarkup.join(""));
};

oAC.doBeforeExpandContainer = function(sQuery, oResponse) {
   if (oAC._nDisplayedItems <= 5) {
      oAC.setFooter("");
   }

   return true;
}

doBeforeExpandContainer is called every time the container opens (just as you would expect it to) and _nDisplayedItems is how many items are going to be displayed in the list (also as you would expect).

So when results are retrieved, the footer is added every time. Then, before the box shows, if there are five or less results, the footer is removed.