vtFilterSelect

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div>
    <div ng-controller="testCtrl" class="col-sm-3">
      <h3>Simple</h3>
      <vt-filter-select ng-model="inputData" ng-selected-items="inputList" ng-is-error="inputError"></vt-filter-select>
      <br />
      <div>selectValue: <b>{{inputData}}</b></div>
      <br />
      <label>
          <input type="checkbox" ng-click="inputError = !inputError" /> Error Flg
      </label>
      <br />
      <br />


      <h3>Callback</h3>
      <vt-filter-select ng-model="inputData2" ng-selected-items="inputList2" ng-selected-callback="selectedEvent(inputData2)"></vt-filter-select>
    </div>
</div>

<script type="text/ng-template" id="template.html">
<div class="input-group" ng-class="ngIsError ? 'has-error' : ''">
<input type="text" class="form-control" ng-model="ngModel" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" style="max-height: 150px; overflow: auto;">
<li ng-repeat="item in ngSelectedItems | filter:ngModel">
<a ng-click="setItem(item)">
<span bind-html-unsafe="item.name | typeaheadHighlight:ngModel"></span>
</a>
</li>
</ul>
</div>
</div>
</script>

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('testCtrl', function ($scope){
  $scope.inputList = [
    {name: 'hoge'},
    {name: 'foo'},
    {name: 'bar'}
  ];

  $scope.inputList2 = [
    {name: 'hoge2', test:'0000'},
    {name: 'foo2'},
    {name: 'bar2'}
  ];
  $scope.selectValue1List = [
    {name: 'test1'},
    {name: 'test2'}
  ];
  $scope.selectedEvent = function(value){
      alert("入力文字:" + value);
  }
});

app.directive('vtFilterSelect',
  function ($timeout, $filter) {
    return {
      restrict    : 'E',
      replace     : true,
      require     : '^ngModel',
      scope       : { ngModel : '=',
                      ngSelectedItems: '=',
                      ngIsError: '=',
                      ngSelectedCallback: '&'
      },
      controller  : function ($scope, $element) {
        var inputEle = $($element).find('input[type="text"]');
        var btnEle = $($element).find('.input-group-btn');
        var delayTime = 200;
        var open = function() {
          if ($scope.ngModel) {
            $timeout(function () {
                btnEle.addClass('open');
            }, delayTime);
          }
        };
        var close = function() {
          btnEle.removeClass('open');
        };
        var initFlag = true;
        $scope.$watch('ngModel', function(newVal, oldVal) {
          if (!initFlag) {
            var isOpen = btnEle.attr('class').indexOf('open');
            var filterList = $filter('filter')($scope.ngSelectedItems, {'name': newVal});
            if (isOpen < 0 && filterList && filterList.length) {
              open();
            } else if (!newVal || filterList && filterList.length < 1){
              close();
            }
          } else {
            initFlag = false;
          }
        });
        var doCallback = function(){
          $scope.ngSelectedCallback();
        }
        inputEle.bind('change', function(){
          doCallback();
        });
        $scope.setItem = function(item)...