JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script type="text/ng-template" id="popup.html">
  <div class="custom-popup-wrapper"
     ng-style="{top: position().top+'px', left: position().left+'px'}"
     style="display: block;"
     ng-show="isOpen() && !moveInProgress"
     aria-hidden="{{!isOpen()}}">
    <p class="message">select location from drop down.</p>

    <ul class="dropdown-menu" role="listbox">
      <li ng-repeat="match in matches track by $index">
      
      	<div ng-if="match.model.generation !== matches[$index - 1].model.generation">
        	Generation {{ match.model.generation }}
        </div>

        <div
          class="uib-typeahead-match"
          ng-class="{active: isActive($index) }"
          ng-mouseenter="selectActive($index)"
          ng-click="selectMatch($index)"
          role="option"
          id="{{ match.number }}">
  			
          <div
            uib-typeahead-match
            index="$index"
            match="match"
            query="query"
            template-url="templateUrl">
          </div>
          
  			</div>
      </li>
    </ul>
  </div>
</script>

<script type="text/ng-template" id="match.html">
  <a>
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
  </a>
</script>

<input type="text" class="form-control"
  ng-model="pokemonSearch"
  uib-typeahead="pokemon.name for pokemon in getPokemon($viewValue)"
  typeahead-show-hint="true"
  typeahead-focus-first="false"
  typeahead-min-length="2"
  typeahead-popup-template-url="popup.html"
  typeahead-template-url="match.html">

<p ng-repeat="pokemon in pokemonList">
  {{ pokemon.number }} - {{ pokemon.name }}
</p>

CSS

.active
{
  color: green;
}

JavaScript

const App = angular.module('App', ['ui.bootstrap']);

App.controller('Main', MainController);

function MainController($scope, $getPokemon) {
	const self = $scope;
  
 	self.getPokemon = $getPokemon;

}






App.service('$getPokemon', ($q, $timeout) => {
	return (searchName) => {
  	let deferred = $q.defer();
    let name = searchName ? searchName.toLowerCase() : '';
    let response = [];
    
    $timeout(() => {    
      Object.keys(PokemonData).forEach(gen => {
        response = response.concat(
        	PokemonData[gen].pokemon.filter(pokemon => 
          	pokemon.name.toLowerCase().indexOf(name) !== -1
          )
       	)
      })
      deferred.resolve(response)
    }, 400)
    
    return deferred.promise;
  }
}) 












let generationBreakpoints = [1, 152, 252, 387, 494, 650, 722];
const PokemonData =...