JSFiddle - React, Tailwind, and code Playground

by Octavianus

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div data-ng-controller="dashboard_controller">
    
<h1>
    Texts
    <input type="text" data-ng-model="text_filter"  placeholder="Text Distributors">
</h1>

    <div>
        <ul data-ng-repeat="t in filteredResults">
           {{t.text }} - {{t.id}}
        </ul>
    </div>
</div>

JavaScript

angular.module('myApp', [])
    .controller("dashboard_controller", function ($scope, $filter) {
    $scope.allText = [
    	{text: 'This is first text from the array.', id: 21}, 
      {text: 'Text in this array is dummy and it makes no sense', id: 32}, 
      {text: 'AngularJS is very old framework', id: 64}
      ];
      
    $scope.$watch("text_filter", function(v) {
    	$scope.filteredResults = $filter("distributorName")($scope.allText, $scope.text_filter);
    });
    
}).filter('distributorName', function() {
  return function(items, filterValue) {
  let filterdArray = []
      if (!filterValue){
          return items;
      }  
			filterValue = filterValue.toLowerCase();
      items.filter( list => {
      	if(list.text.toLowerCase().includes(filterValue)){
          let catchPattern = new RegExp('(\\w*'+filterValue+'\\w*)','gi');
          let matches = list.text.toLowerCase().match(catchPattern)
          if(!matches)
          	return items;
          
          filterdArray.push({
          'text': matches,
          'id': list.id
          })  
        }

    });
    return filterdArray;
    };
});