代码
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);
}
}
代码2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉搜索</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.iput {
height: 25px;
width: 200px;
padding-left: 5px;
}
.iop {
height: 25px;
margin-left: 5px;
}
.iop:hover {
background-color: #1E90FF;
}
.op-list {
position: absolute;
background: white;
border: solid 1px #767676;
width: 209px;
height: 125px;
overflow-y: auto;
}
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div><input class="iput" placeholder="请点击或输入搜索字段..." onclick="showOption()" oninput="search(this.value)"
onporpertychange="search(this.value)" onchange="search(this.value)"></div>
<div class="op-list hidden">
<div class="iop">--请选择--</div>
<div class="iop">测试1</div>
<div class="iop">测试2</div>
<div class="iop">测试3</div>
<div class="iop">测试4</div>
<div class="iop">测试5</div>
<div class="iop">测试6</div>
<div class="iop">测试7</div>
<div class="iop">测试8</div>
<div class="iop">测试9</div>
</div>
sssssss
<script>
function showOption() {
$('.op-list').toggleClass('hidden');
$('.iop').show();
}
$(document).on('click', '.iop', function () {
$('.op-list').addClass('hidden');
var text = $(this).text();
$('.iput').val(text);
})
function search(value) {
$('.iop').show();
$('.iop').each(function () {
var text = $(this).text();
if (text.indexOf(value) == -1) {
$(this).hide();
}
});
}
$(document).click(function (e) {
if ('iput' != e.target.className) {
$('.op-list').addClass('hidden');
}
});
</script>
</body>
</html>