功能点：
输入、下拉选择、根据输入内容模糊检索、键盘上下键选择
实现思路：
显示隐藏：
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;width: 12px;height: 8px;right: 14px;' +
' border-left: 6px solid transparent;\n' +
' border-right: 6px solid transparent;\n' +
' 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));
}
}
})
效果图：