自定义带搜索框的下拉列表插件

2017-01-13 10:49:36来源:网络收集作者:管理员人点击

最近项目所需,开发了一个附带搜索框的下拉列表插件,在搜索框中输入关键字的同时,捕捉键盘按键释放事件,更新下拉列表显示内容。


jquery插件开发参考:
http://blog.csdn.net/xyr05288/article/details/51094644


一. 插件源文件

css源文件:


.my-dropdownContainer{
position: relative;
height: 30px;
width: 200px;
background: #fff;
/* z-index:20; */
}
.my-dropdownDefault{
border:1px solid #ddd;
line-height: 28px;
text-indent: 0.5em;
border-radius:5px;
}
.my-dropdown-menu-div{
position: absolute;
top:100%;
/*width: 100%;*/
width:250px;
left: 0;
display:none;
border:1px solid #ddd;
border-radius:5px;
padding:5px;
background: #fff;
overflow: auto;
/*height: 150px;*/
max-height:150px;
z-index:20;
}
.my-dropdown-menu{
padding-left:0px;
background: #fff;
margin-top:5px;
}
.my-dropdown-menu li{
/*line-height: 24px;*/
list-style:none;
}
.my-dropdown-menu li div.li-div-class:hover{
background-color: #0078b6;
color: #fff;
}
/* .hoverClass div{
background-color: #0078b6;
color: #fff;
} */
.arrow{
width: 0;
height: 0;
display: inline-block;
cursor: pointer;
}
.downArrow{
position: absolute;
right: 5px;
top: 10px;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 7px solid #555;
}
.upArrow{
position: absolute;
right: 5px;
top: 10px;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-bottom: 7px solid #555;
}
.li-div-class{
position: relative;
height:45px;
}
.user-image-class{
position: absolute;
left: 2px;
top: 5px;
height: 30px;
width: 30px;
}
.user-image-class img{
height: 30px;
width: 30px;
}
.user-name-class{
position: absolute;
left: 38px;
top: 5px;
font-size: 12px;
}
.user-depart-class{
position: absolute;
left: 38px;
top: 20px;
font-size: 12px;
/*div只显示一行*/
width:80%;
text-overflow: ellipsis;
white-space: nowrap;
overflow:hidden;
}

js源文件:


//20170111 自定义下拉列表插件
//20160406 构造对象
var defaultOptions= {
listData: [], //直接设置原始数据
url:"",//通过url动态获取数据
keyword:"" //url只接受keyword参数
};
var $options = defaultOptions;
$.fn.customeDownList = function(){
var options = {};
if(arguments.length == 1){//一个参数
if(typeof(arguments[0]) == 'object'){//初始化options
initDownList(this[0],arguments[0]);
}
}else if(arguments.length == 2){
if(typeof(arguments[0]) == 'string' && typeof(arguments[1]) == 'object'){//调用方法
if(arguments[0] == 'setData'){
var ulObj = this.find('.my-dropdown-menu-div').find('.my-dropdown-menu').get(0);
setData(ulObj,arguments[1]);
}
}
}
};
function initDownList(obj,options){
//这里其实就是合并多个对象为一个。这里就是,如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。
$options = $.extend(defaultOptions,options);
console.log(obj);
var dataStr = "";
var listData = $options.listData;
var url = $options.url;
if(url != ""){
var keyword = $options.keyword;
listData = getListDataByUrl(url,keyword);
}
if(listData != undefined && listData.length>0){
for(var i=0; idataStr += '
  • '+'
    '
    + '
    '+ listData[i].name + '
    '
    + '
    '
    + listData[i].depart + '
    '
    + '
  • ';
    }
    }
    //插件中动态添加的DOM元素统统用类标识不要用ID 元素之间的获取借助DOM树结构
    var htmlStr = "";
    htmlStr += '
    ';
    htmlStr += '
    ';
    htmlStr += '';
    htmlStr += '
    ';
    //下拉列表输入框的键盘释放事件
    htmlStr += '';
    htmlStr += '
      ';
      htmlStr += dataStr;
      htmlStr += '
    ';
    htmlStr += '
    ';
    htmlStr += '
    ';
    obj.innerHTML = htmlStr;
    //箭头的点击事件
    $(".my-dropdownContainer .arrow").unbind("click").click(function(){
    console.log("click obj parent parent: ");
    console.log($(this).parent().parent());
    if($(this).hasClass("downArrow")){
    $(this).siblings(".my-dropdown-menu-div").show();
    //清空输入框 重新初始化下拉列表
    var inputObj = $(this).siblings(".my-dropdown-menu-div").find('input').get(0);
    inputObj.value = "";
    onkeyupInput(inputObj);
    $(this).removeClass("downArrow");
    $(this).addClass("upArrow");
    }else if($(this).hasClass("upArrow")){
    $(this).siblings(".my-dropdown-menu-div").hide();
    $(this).removeClass("upArrow");
    $(this).addClass("downArrow");
    }
    });
    //列表项的点击事件
    $(".my-dropdown-menu li .li-div-class").unbind("click").click(function(){
    var $nameObj = $(this).find('.user-name-class');
    $(this).parent().parent().parent().siblings(".my-dropdownDefault").html($nameObj.html());
    $(this).parent().parent().parent().hide();
    var arrowObj = $(this).parent().parent().parent().siblings(".arrow");
    if(arrowObj.hasClass("upArrow")){
    arrowObj.siblings(".my-dropdown-menu-div").hide();
    arrowObj.removeClass("upArrow");
    arrowObj.addClass("downArrow");
    }
    });
    }
    function setData(ulObj, data){
    //将选择的值重新拼接为html字符串添加在ul中
    var htmlStr = "";
    for(var i=0; i htmlStr += '
  • '+'
    '
    + '
    '+ data[i].name + '
    '
    + '
    '
    + data[i].depart + '
    '
    + '
  • ';
    }
    ulObj.innerHTML = htmlStr;
    /*$(".li-div-class").mouseover(function(){
    if(!$(this).hasClass("hoverClass")){
    $(this).addClass("hoverClass");
    }
    });
    $(".li-div-class").mouseout(function(){
    if($(this).hasClass("hoverClass")){
    $(this).removeClass("hoverClass");
    }
    });*/
    //动态生成的DOM元素click事件需重新绑定
    $(".my-dropdown-menu li .li-div-class").unbind("click").click(function(){
    var $nameObj = $(this).find('.user-name-class');
    $(this).parent().parent().parent().siblings(".my-dropdownDefault").html($nameObj.html());
    $(this).parent().parent().parent().hide();
    var arrowObj = $(this).parent().parent().parent().siblings(".arrow");
    if(arrowObj.hasClass("upArrow")){
    arrowObj.siblings(".my-dropdown-menu-div").hide();
    arrowObj.removeClass("upArrow");
    arrowObj.addClass("downArrow");
    }
    });
    }
    //必须定义到外面 定义到闭包函数里面时无法获取
    function onkeyupInput(obj){
    var value = obj.value;
    console.log("value: " + value);
    var ulObj = $(obj).siblings(".my-dropdown-menu").get(0);//jquery对象转DOM对象
    console.log(ulObj);
    var liElementArr = ulObj.getElementsByTagName("li");
    console.log("liElementArr: " + liElementArr.length);
    var newValues = [];
    var url = $options.url;
    if(url == ""){
    var listData = $options.listData;
    $.each(listData,function(index,tempValue){
    if(tempValue.indexOf(value) >= 0){
    newValues.push(tempValue);
    }
    });
    }else{
    keyword = value;
    newValues = getListDataByUrl(url,keyword);
    }
    console.log("newValues: ");
    console.log(newValues);
    //将选择的值重新拼接为html字符串添加在ul中
    setData(ulObj,newValues);
    }
    function getListDataByUrl(url,keyword){
    var listData = [];
    $.ajax({
    async: false,//同步
    type:"POST",
    url:url,
    dataType:"json",
    data:{
    "keyword":keyword
    },
    error:function(){
    alert("列表数据获取失败");
    },
    success:function(responseInfo){
    if(responseInfo['status'] == 1){
    alert("列表数据获取失败");
    }
    if(responseInfo["status"] == 0){
    console.log(responseInfo.data);
    listData = responseInfo.data.listData;
    }
    }//end success
    });
    return listData;
    }

    html中调用形式:






    获取选择数据:


    var value = $("#downListDIV").find('.my-dropdownDefault').html();

    二. 所遇问题
    (1)在页面中增加了两个下拉列表组件时,点击第一个组件右边的箭头时,onclick事件会被触发两次,导致下拉列表选项内容无法显示出来。


    原因:Click事件 进行了累加绑定,每当我调用一次时,他便增加一次绑定


    解决方法: 每次绑定前先解绑


    $('#sub').unbind('click').click(function () {
    ...
    });

    最新文章

    123

    最新摄影

    微信扫一扫

    第七城市微信公众平台