input模拟输入下拉框

    功能点:

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

  实现思路:

    显示隐藏:

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

    下拉选择:

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

    模糊检索:

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

    键盘上下选择:

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

  具体实现过程:

    

  1 xxx.directive('inputAndSelect', function ($timeout) {
  2     return {
  3       restrict: 'AE',
  4       replace: true,
  5       require: 'ngModel',
  6       scope: {
  7         'ngModel': '=',
  8         'data': '@',
  9         'callback': '&'
 10       },
 11       template: '<div class="select-box">' +
 12         ' <input type="text" ng-focus="inputOnFocus($event)" ng-blur="inputOnBlur()"' +
 13         '      ng-model="ngModel" style="z-index: 10;" class="form-control huowu-input"><span class="arrow-down" style="display:inline-block;width: 12px;height: 8px;right: 14px;' +
 14         '   border-left: 6px solid transparent;\n' +
 15         '    border-right: 6px solid transparent;\n' +
 16         '    border-top: 8px solid #818181;"></span>' +
 17         '   <div class="select-box-container" style="z-index: 999;background-color: #fff;" ng-show="showSelect">' +
 18         '     <div class="select-box-item" ng-click="selectInputItem(item)" ng-repeat="item in dataList">{{item}}</div></div>' +
 19         '</div>',
 20       link: function(scope, element, attrs) {
 21         //显示/隐藏下拉列表
 22         scope.showSelect = false;
 23         scope.dataList = [];
 24         scope.selectIndex = -1;
 25         var eleInput = element.find('input');
 26         eleInput.attr('id', attrs.id);
 27         //input获取焦点
 28         eleInput.unbind('focus').bind('focus',function() {
 29           scope.showSelect = true;
 30           scope.dataList = JSON.parse(scope.data);
 31           element.find('.select-box-container .select-box-item').removeClass('option-active');
 32           $timeout(function () {
 33             element.find('.select-box-container').scrollTop(0);
 34           }, 0);
 35           if (scope.ngModel) {
 36             scope.dataList = scope.dataList.filter(function(vv) {
 37               return vv.indexOf(scope.ngModel) !== -1;
 38             })
 39           }
 40           if(attrs.callback) {
 41             scope.$parent[attrs.callback]();
 42           }
 43         });
 44         //选择输入项
 45         scope.selectInputItem = function(item) {
 46           scope.ngModel = item;
 47           scope.showSelect = false;
 48         };
 49         
 50         //input失去焦点
 51         scope.inputOnBlur = function() {
 52           $timeout(function() {
 53             scope.selectIndex = -1;
 54             scope.showSelect = false;
 55           }, 200)
 56         };
 57         //监听输入数据的变化
 58         scope.$watch('ngModel', function(newVal) {
 59           if(!scope.data) return;
 60           var items = JSON.parse(scope.data);
 61           if (!newVal && typeof newVal === 'string') {
 62             scope.dataList = items;
 63           } else {
 64             scope.dataList = items.filter(function(vv) {
 65               return vv.indexOf(newVal) !== -1;
 66             })
 67           }
 68         });
 69         //监听键盘按下事件
 70         eleInput.unbind('keydown').bind('keydown', ke.utils.throttle(function(e) {
 71           //keycode 38 up 40 down
 72           var items = element.find('.select-box-container .select-box-item');
 73           var $container = element.find('.select-box-container');
 74           var keycode = e.keyCode;
 75           if (keycode === 40) {
 76             //按键向下
 77             scope.selectIndex++;
 78             scope.selectIndex = scope.selectIndex > scope.dataList.length - 1 ? 0 : scope.selectIndex;
 79           } else if (keycode === 38) {
 80             //按键向上
 81             scope.selectIndex--;
 82             scope.selectIndex = scope.selectIndex < 0 ? scope.dataList.length - 1 : scope.selectIndex;
 83           } else if (keycode === 13) {
 84             if (scope.selectIndex !== -1) {
 85               scope.ngModel = scope.dataList[scope.selectIndex];
 86               scope.showSelect = false;
 87             }
 88             element.find('input').blur();
 89           }else {
 90             return;
 91           }
 92           items.removeClass('option-active');
 93           $(items[scope.selectIndex]).addClass('option-active');
 94           if(scope.selectIndex === 0) {
 95             $container.scrollTop(0);
 96           }
 97           $container.scrollTop(scope.selectIndex*25);
 98         }, 50));
 99       }
100     }
101   })

   效果图:

  input模拟输入下拉框

 

上一篇:Can't bind to 'ngModel' since it isn't a known property of 'input'.解决办


下一篇:javascript – 单击时刷新页面的按钮