Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.js"></script>
  <script src="https://rawgithub.com/hakib/MassAutocomplete/master/massautocomplete.min.js"></script>
  <link rel="stylesheet" href="https://rawgithub.com/hakib/MassAutocomplete/gh-pages/massautocomplete.theme.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no">
  <title>Mass autocomplete benchmark</title>
</head>
<body ng-app='app'>
  <div ng-controller="mainCtrl" class="container main">
    <div class="benchmark-header">
      <h1> Mass-Autocomplete </h1> 
      <p>
        Watch count is <span class="measure"> {{ getWatchCount() }} </span>
      </p>
      <p>
        Total Digest time <span class="measure" id="total-digest-time"></span> ms
      </p>
    </div>
    
    <div mass-autocomplete class="matrix">
      <input ng-repeat="cell in dirty.states track by $index"
             ng-model=cell
             mass-autocomplete-item=ac_options 
             class="matrix-cell" /> 
    </div>
    
    <h3> Digest cycles </h3>
    <ul id="timing-list">
    </ul>
</body>
</html>
 
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400;500);
​
@matrix-border: #ddd;
​
body { 
  font-family : Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size : 13px;
  padding : 0;
  margin : 0;
}
​
.ac-container { 
  min-width : 200px;
}
​
.benchmark-header { 
  background-color : #333;
  color : white;
  padding : 10px;
  box-shadow : 0px 2px 3px rgba(0,0,0,0.3);
  .measure { 
    font-size : 150%;
    color : gold;
  }
}
.matrix {
  display: inline-block;
  border-color : @matrix-border;
  border-style : solid;
  border-width : 1px 0 0 1px;
  .matrix-cell { 
    border-style : solid; 
    border-width : 0 1px 1px 0;
    border-color : @matrix-border;
    max-width : 50px;
    font-size : 13px;
    padding : 3px;
    background-color : white;
  }
}
 
angular.module('app',['ngSanitize','MassAutoComplete'])
.factory('watchCounter', function() { 
  return {
    // Ugly non angularish hack but does the trick
    getWatchCount : function () {
      var total = 0;
      Array.prototype.slice.call(
        document.getElementsByClassName('ng-scope')
      ).concat(
        Array.prototype.slice.call(
          document.getElementsByClassName('ng-isolate-scope')
        )
      )
      .forEach(function(elm) { 
        var scope = angular.element(elm).scope();
        total += scope.$$watchers ? scope.$$watchers.length : 0;
      });
      return total;
    }
  };
}).
​
run(['$rootScope', function($rootScope) {  
  var $oldDigest = $rootScope.$digest;
  var timing_list = document.getElementById("timing-list");
  var total_digest_time = 0;
  var total_digest_time_elment = document.getElementById("total-digest-time");
  var $newDigest = function() {
    var t1 = performance.now();
    $oldDigest.apply($rootScope);
    var duration = Math.round((performance.now() - t1) * 100) / 100;
    total_digest_time += duration;
    total_digest_time_elment.innerHTML = Math.round(total_digest_time * 100) / 100;
    li = document.createElement('li');
    li.innerHTML = duration + 'ms';
    timing_list.insertBefore(li,timing_list.childNodes[0]);
  };
  $rootScope.$digest = $newDigest;
}])
​
.controller('mainCtrl', function($scope, $timeout, watchCounter) { 
  $scope.getWatchCount = watchCounter.getWatchCount;
  
  $scope.dirty = {};
  $scope.dirty.states = Array.apply(null, Array(100));
  
  var states = [
      'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado',
      'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
      'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
      'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
      'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
      'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio',
      'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina',
      'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia',
      'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];
  
  // Basic
  function suggest_state(term) {
    var q = term.toLowerCase().trim(),
        results = [];
​
    for (var i = 0; i < states.length && results.length < 10; i++) {
      var state = states[i];
      if (state.toLowerCase().indexOf(q) === 0)
        results.push({ label: state, value: state });
    }
​
    return results;
  }
  
  $scope.ac_options = { 
    suggest: suggest_state
  }
  
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x