在Angular指令的自定义下拉列表中添加搜索过滤器

Question

我想在angularJS的选择下拉列表中添加搜索过滤器。

并使用ng-options列出选项并使用过滤器过滤掉搜索框中的数据，您可以在其中通过输入名称的序列选择元素，例如从您的选择中选择埃及通过在选择下拉列表中键入e + g，您可以执行此操作。在当前下拉列表中，它不允许您键入搜索。

以下是供您参考的代码：

以下是Plunker自定义下拉列表

这是我的自定义下拉列表：

userApp.directive('ngDropdown',

  function($parse, $timeout, $interpolate) {

    return {
      restrict: 'AC',
      controller: function($scope) {

        $scope.dropdown = null;
      },
      link: function(scope, elem, attrs, ctlr) {

        var button = $('<div class="btn-group">' +
          '<button type="button" class="btn btn-white dropdown-label" data-toggle="dropdown">Select...</button>' +
          '<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">' +
          '<i class="fa fa-angle-down"></i>' +
          '<span class="sr-only">Toggle Dropdown</span>' +
          '</button>' +
          '<ul class="dropdown-menu fx-slidedown" role="menu"></ul>' +
          '</div>');

        var menu = $(".dropdown-menu", button),
          label = $(".dropdown-label", button);

        menu.css({
          height: 'auto',
          maxHeight: 300,
          overflowX: 'hidden',
          overflowY: 'auto'
        });

        elem.hide();
        elem.after(button);

        //var size = button.parent().width();
        button.find('button').eq(0).css({
          maxWidth: '82.5%',
          textAlign: 'left'
        });

        elem
          .on("focus", function() {
            button.dropdown('toggle');
          });

        if (attrs.ngModel) {

          scope.$watch(attrs.ngModel, function(value) {
            if (typeof value != 'undefined') {
              ctlr.select(value);
            } else {
              label.html('Select...');
              elem.val(null);
            }
          });

        };

        ctlr.update = function(value) {
          $timeout(function() {
            scope.$apply(attrs.ngModel + '="' + value + '"');
          }, 0);
        };

        ctlr.select = function(value) {

          ctlr.selected = value;
          elem.val(value);
          label.html(elem.find('option:selected', elem).html());
        };

        ctlr.add = function(option) {
          menu.append(option);
        };

        ctlr.remove = function(option, value) {
          if (elem.val() == value) {
            label.html('Select...');
          }
          option.remove();
        };
      }
    };
  });