'Show more results' in bootstrap typeahead UI

Question

I am trying to implement the Show more results function in typeahead in the bootstrap user interface. Initially, it should load 5 results, and then, if the results exceed 5, I want to show the "Show more results" option to load ALL results from the API again (without restrictions).

Here is my definition of typeahead in the template:

<input type="text" name="FullName" id="FullName"
    class="form-control"  autocomplete="false" required="required"
    placeholder="Search by name"
    uib-typeahead="ent as ent.FullName for ent in vm.findEntities($viewValue)"
    typeahead-popup-template-url="entityPopup.tpl.html"
    typeahead-template-url="popupMatch.tpl.html"
    typeahead-on-select="vm.entitySelected($item)"
    ng-model="vm.FullName">

I have a variable in the parent parent controller with the result count. $parent.$parent.vm._entityTotalResults. If this score exceeds 5, I want to display the Show more button , which loads more results and fills them in typeahead results.

My entityPopup.tpl.htmlnext one:

Just the default one with one added <li></li>

<ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
      <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
          <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
      </li>
      <li ng-show="$parent.$parent.vm._entityTotalResults > 5">SHOW MORE</li>
  </ul>

typeahead findEntities() :

vm.findEntities = function findEntities(viewValue, limit) {
  return apiService.findEntities(viewValue, limit)
    .then(function(matches) {
      vm._entityTotalResults = matches.TotalResults;
      return matches.Results;
    });
  };

apiService.findEntities() - API, limit $http. null, , .

? , .

Answer 1

typeahead uibTypeahead

Answer 2

, , UibTypeaheadController. getMatchesAsync:

originalScope.$on('loadMore', function() {
  hasFocus = true;
  getMatchesAsync(modelCtrl.$viewValue);
});

, Load More, ng-click, loadMore, . $emit ('loadMore'). , .