input模拟输入下拉框

　   功能点：

　　　　输入、下拉选择、根据输入内容模糊检索、键盘上下键选择

　　实现思路：

　　　　显示隐藏：

　　　　　　input获取焦点显示，失去焦点隐藏

　　　　下拉选择：

　　　　　　以父元素为基准，通过绝对定位定位至input输入下方

　　　　模糊检索：

　　　　　　监听输入数据的变化，过滤符合要求的数据

　　　　键盘上下选择：

　　　　　　监听input的键盘事件，判断keycode值，再触发上下键时，动态计算滚动条滚动的距离

　　　　控制事件触发频率，采用函数节流

　　具体实现过程：

　　　　节流函数：

function throttle(func, wait, options) {//函数节流
        var context, args, result;
        var timeout = null;
        var previous = 0;
        if (!options) options = {};
        var later = function() {
            previous = options.leading === false ? 0 : new Date().getTime();
            timeout = null;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        };
        return function() {
            var now = new Date().getTime();
            if (!previous && options.leading === false) previous = now;
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0 || remaining > wait) {
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                previous = now;
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        }
    }

功能代码：

xxx.directive('inputAndSelect', function ($timeout) {
    return {
      restrict: 'AE',
      replace: true,
      require: 'ngModel',
      scope: {
        'ngModel': '=',
        'data': '@',
        'callback': '&'
      },
      template: '<div class="select-box">' +
        ' <input type="text" ng-focus="inputOnFocus($event)" ng-blur="inputOnBlur()"' +
        '      ng-model="ngModel" style="z-index: 10;" class="form-control huowu-input"><span class="arrow-down" style="display:inline-block; 12px;height: 8px;right: 14px;' +
        '   border-left: 6px solid transparent;
' +
        '    border-right: 6px solid transparent;
' +
        '    border-top: 8px solid #818181;"></span>' +
        '   <div class="select-box-container" style="z-index: 999;background-color: #fff;" ng-show="showSelect">' +
        '     <div class="select-box-item" ng-click="selectInputItem(item)" ng-repeat="item in dataList">{{item}}</div></div>' +
        '</div>',
      link: function(scope, element, attrs) {
        //显示/隐藏下拉列表
        scope.showSelect = false;
        scope.dataList = [];
        scope.selectIndex = -1;
        var eleInput = element.find('input');
        eleInput.attr('id', attrs.id);
        //input获取焦点
        eleInput.unbind('focus').bind('focus',function() {
          scope.showSelect = true;
          scope.dataList = JSON.parse(scope.data);
          element.find('.select-box-container .select-box-item').removeClass('option-active');
          $timeout(function () {
            element.find('.select-box-container').scrollTop(0);
          }, 0);
          if (scope.ngModel) {
            scope.dataList = scope.dataList.filter(function(vv) {
              return vv.indexOf(scope.ngModel) !== -1;
            })
          }
          if(attrs.callback) {
            scope.$parent[attrs.callback]();
          }
        });
        //选择输入项
        scope.selectInputItem = function(item) {
          scope.ngModel = item;
          scope.showSelect = false;
        };
        
        //input失去焦点
        scope.inputOnBlur = function() {
          $timeout(function() {
            scope.selectIndex = -1;
            scope.showSelect = false;
          }, 200)
        };
        //监听输入数据的变化
        scope.$watch('ngModel', function(newVal) {
          if(!scope.data) return;
          var items = JSON.parse(scope.data);
          if (!newVal && typeof newVal === 'string') {
            scope.dataList = items;
          } else {
            scope.dataList = items.filter(function(vv) {
              return vv.indexOf(newVal) !== -1;
            })
          }
        });
        //监听键盘按下事件
        eleInput.unbind('keydown').bind('keydown', throttle(function(e) {
          //keycode 38 up 40 down
          var items = element.find('.select-box-container .select-box-item');
          var $container = element.find('.select-box-container');
          var keycode = e.keyCode;
          if (keycode === 40) {
            //按键向下
            scope.selectIndex++;
            scope.selectIndex = scope.selectIndex > scope.dataList.length - 1 ? 0 : scope.selectIndex;
          } else if (keycode === 38) {
            //按键向上
            scope.selectIndex--;
            scope.selectIndex = scope.selectIndex < 0 ? scope.dataList.length - 1 : scope.selectIndex;
          } else if (keycode === 13) {
            if (scope.selectIndex !== -1) {
              scope.ngModel = scope.dataList[scope.selectIndex];
              scope.showSelect = false;
            }
            element.find('input').blur();
          }else {
            return;
          }
          items.removeClass('option-active');
          $(items[scope.selectIndex]).addClass('option-active');
          if(scope.selectIndex === 0) {
            $container.scrollTop(0);
          }
          $container.scrollTop(scope.selectIndex*25);
        }, 50));
      }
    }
  })

　　　效果图：