Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
  <script src="https://rawgithub.com/hakib/MassAutocomplete/master/massautocomplete.js"></script>
  <link href="https://rawgithub.com/hakib/MassAutocomplete/master/massautocomplete.theme.css" rel="stylesheet" type="text/css" />
  <meta charset="utf-8">
  <title>Mass Auto Complete</title>
</head>
<body ng-app="app">
    <div ng-controller="mainCtrl">
      <div mass-autocomplete>
        <input ng-model="dirty.value"
               placeholder="Search"
               mass-autocomplete-item="acoptions"
               ng-class="hasResults ? 'has-results' : 'no-results'" />
        
      </div>
    </div>
  </body>
</body>
</html>
 
input { 
  padding: 3px 20px;
  border-radius: 15px;
  border-width: 2px;
}
input.has-results { 
  border-color: green;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}
input.no-results { 
  border-color: #999;
}
 
angular
  
  .module('app', ['ngSanitize', 'MassAutoComplete'])
  .controller('mainCtrl', function ($scope) {
  
    $scope.dirty = {};
  
     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'
    ];
  
    function suggest(term) {
      matches = states
          // Find a match     
          .filter(function(name) {
            return name.toLowerCase().indexOf(term.toLowerCase()) > -1;
          // Format results
          }).map(function(name) { 
            return {label: name, value: name };
          }
      );
      $scope.hasResults = !!matches.length;      
      return matches;
    }
    
    $scope.acoptions = {
      suggest: suggest,
      on_select: function () { 
        $scope.dirty.value = undefined;
        $scope.hasResults = false;
        $scope.$apply();
      }, 
      on_detach: function () { 
        $scope.hasResults = false;
        $scope.$apply();
      }
    };
  });
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
hakibpro
0viewers