JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-app="app">
<div ng-controller="mainCtrl">
<input id="searchField" type="search" ng-model="searchQuery" placeholder="search" />{{ loading ? "loading..." : "" }}
<div ng-repeat="c in countries | filter:search">{{c.country}} - {{c.language}}</div>
</div>
</div>
JavaScript
(function(){
/* Todo: fix performance */
angular.module('app', [])
.controller('mainCtrl', function($scope){
$scope.countries = [
{ country: 'Japan', language: 'Japanese' },
{ country: 'Korea', language: 'Korean' },
{ country: 'North Korea', language: 'Korean'},
{ country: 'China', language: 'Chinese'},
{ country: 'Hong Kong', language: 'Cantonese'},
{ country: 'Sinagpore', language: 'English'},
{ country: 'Thailand', language: 'Thai'},
{ country: 'Malaysia', language: 'Malay'},
{ country: 'Brunei', language: 'Malay'}
];
/* show loading indicator */
$scope.loading = false;
$scope.$watch('searchQuery', function(x,y){
if(x !== y) $scope.loading = true;
});
$scope.$watch('searchQuery', _.debounce(function(newV, oldV){
if(newV == oldV) return;
$scope.$apply(function(){
$scope.search = $scope.searchQuery;
highlightInput('searchField');
$scope.loading = false;
});
}, 6000));
var updateQuery = function() {
$scope.search = $scope.searchQuery;
highlightInput('searchField');
};
//hightlight the text
var highlightInput = function(id) {
document.getElementById(id).select();
};
});
})();