pJLqpO

index.html

<div ng-app="App">
  <div ng-controller="MyCtrl">
    <div class="tags">
      <ul class="list-inline">
        <li ng-repeat="item in items track by $index">
          {{item}} <button ng-click="remove($index)">X</button>
        </li>
        <li style="position:absolute;">
          <input class="silent" ng-model="keyword" ng-keypress="key($event)">
          <ul ng-show="keyword">
            <li ng-repeat="sugg in suggs | filter:keyword track by $index">
              <a ng-click="select($index)">{{sugg}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

pJLqpO.markdown

pJLqpO

A Pen by Ringoluo on CodePen.

License.

script.js

var App = angular.module('App', [])

App.controller('MyCtrl', function($scope) {
  $scope.suggs = ['test', 'test1', 'test2', 'test111'];
  $scope.items = [];
  $scope.remove = function(idx) {
    $scope.items.splice(idx, 1);
  };
  $scope.key = function($event) {
    if ($event.keyCode == 13) {
      if($scope.keyword) {
        $scope.items.push($scope.keyword);
        delete $scope.keyword;
      }
    }
  };
  $scope.select = function(idx) {
    $scope.items.push($scope.suggs[idx]);
    delete $scope.keyword;
  };
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

.tags {
  width: 400px;
  overflow: scroll;
  border: solid 1px black;
}

input.silent {
  border:none;
}

input.silent:focus {
    outline: 0;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />