代码
html:
<input class="searchInput" itemIndex="{{$index}}" placeholder="请输入搜索关键字" type="text" value="">
<div id="dataDownListOutDiv">
<div class="dataDownList" ng-repeat='pl in PointList track by $index'
itemIndex="{{$index}}" tabindex="{{$index}}" ng-click="">
{{pl.name}}
</div>
</div>
css:
#dataDownListOutDiv{
background-color: #f3f8ff;
min-width:2px;
min-height: 1px;
z-index: 999999;
position: absolute;
}
#dataDownListOutDiv .active{
background-color: #b8daff;
}
js:
/**
* 构造对象
*/
var sdl = new searchDownList(inputChangeCallBack,itemClickCallBack,".searchInput","#dataDownListOutDiv",".dataDownList","itemIndex");
/**
* 调用input的初始化方法
*/
sdl.searchInputInit();
/**
* input值改变
*/
var inputChangeCallBack=function(inputObj){
$scope.PointList=new Array();
$scope.$apply();
$scope.PointList=[
{id:"1",name:"知识点一"},
{id:"2",name:"知识点二"}
];
$scope.$apply();
//调用下拉列表的初始化方法
sdl.downListInit();
}
/**
* item被选中
* @param inputObj
*/
var itemClickCallBack = function(itemObj){
console.log(itemObj.html());
console.log("选中item");
}
/**
* 搜索下拉框对象
* @param searchInputId
*/
function searchDownList(inputChangeCallBack, itemClickCallBack, searchInputId, downListOutDivId, downListItemClass, itemIndexName){
/**
* 下拉列表中当前所在的itemIndex
* @type {number}
*/
this.currentDownListIndex = 0;
/**
* input的keyup回调函数(keyup当作input改变值了)
*/
this.inputChangeCallBack = inputChangeCallBack;
/**
* 下拉列表item选中回调函数
*/
this.itemClickCallBack = itemClickCallBack;
/**
* input的ID
*/
this.searchInputId = searchInputId;
/**
* 下拉列表外层div的Id
*/
this.downListOutDivId = downListOutDivId;
/**
* 下拉列表item的class
*/
this.downListItemClass = downListItemClass;
/**
* 下拉列表item的index名称
*/
this.itemIndexName = itemIndexName;
let sdl = this;
/**
* input 初始化事件
* 为所有的input绑定keyup事件
* @param callBackFun
*/
this.searchInputInit = function(){
//按键弹起
$(sdl.searchInputId).keyup(function(ev){
var oEvent=ev||event;
var eCode = oEvent.keyCode;
console.log("按下键值:"+eCode);
if (eCode == 40){
//下键
sdl.itemUpDown();
}else if (eCode == 13){
//回车
var itemIndex = Number($(this).attr(sdl.itemIndexName));
enter(itemIndex);
}else{
//其他按键
sdl.searchInputChange($(this));
}
})
};
/**
* input 改变事件
* @param inputObj
* @param callBackFun
*/
this.searchInputChange = function(inputObj){
//将下拉列表的index改为0
sdl.currentDownListIndex = 0;
var val = inputObj.val();
var top = inputObj.offset().top;
var left = inputObj.offset().left;
console.log("input:"+val);
if (val == null | val =='') {
$(sdl.downListOutDivId).hide();
return;
}
$(sdl.downListOutDivId).show();
$(sdl.downListOutDivId).offset({top:top+30,left:left});
//回调函数
sdl.inputChangeCallBack(inputObj);
};
/**
* item 初始化事件
*/
this.downListInit = function () {
console.log("下拉列表击发事件绑定");
$(sdl.downListItemClass).keyup(function(ev){
var oEvent=ev||event;
var eCode = oEvent.keyCode;
var itemIndex = Number($(this).attr(sdl.itemIndexName));
if (eCode == 38){
//向上
sdl.currentDownListIndex = itemIndex-1;
sdl.itemUpDown();
}else if (eCode == 40){
//向下
sdl.currentDownListIndex = itemIndex+1;
sdl.itemUpDown();
}else if (eCode == 13){
//回车
sdl.currentDownListIndex = itemIndex;
sdl.itemEnter($(this));
}
})
};
/**
* item 上下移动事件
*/
this.itemUpDown = function(){
$(sdl.downListItemClass).each(function(){
var itemIndex = Number($(this).attr(sdl.itemIndexName));
//$(this).css("background-color","#eee");
$(this).removeClass("active");
if (itemIndex == sdl.currentDownListIndex) {
$(this).focus();
//$(this).css("background-color","#b8daff");
$(this).addClass("active");
}
})
};
/**
* item 选中事件
* @constructor
*/
this.itemEnter = function(itemObj){
sdl.itemClickCallBack(itemObj);
}
}