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

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

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; i<listData.length; i++){
                dataStr += '<li><div class="li-div-class">'+'<div class="user-image-class"><img src = "'+ listData[i].image  + '"/></div>' 
                        + '<div class="user-name-class">'+ listData[i].name + '</div>'
                        + '<div class="user-depart-class" ' + 'title=' + listData[i].depart + '>'
                        + listData[i].depart + '</div>' 
                        + '</div></li>';
            }
        }

        //插件中动态添加的DOM元素统统用类标识  不要用ID 元素之间的获取借助DOM树结构
        var htmlStr = "";
        htmlStr += '<div class="my-dropdownContainer">';
        htmlStr += '<div class="my-dropdownDefault"></div>';
        htmlStr += '<span class="downArrow arrow"></span>';
        htmlStr += '<div class="my-dropdown-menu-div">';
        //下拉列表输入框的键盘释放事件
        htmlStr += '<input onkeyup="javascript:onkeyupInput(this);" type="text" style="width:100%;height:27px;border:1px solid #ddd;border-radius:5px;" />';
        htmlStr += '<ul class="my-dropdown-menu">';
        htmlStr += dataStr;     
        htmlStr += '</ul>';
        htmlStr += '</div>';
        htmlStr += '</div>';

        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<data.length; i++){
        htmlStr += '<li><div class="li-div-class">'+'<div class="user-image-class"><img src = "'+ data[i].image  + '"/></div>' 
        + '<div class="user-name-class">'+ data[i].name   + '</div>'
        + '<div class="user-depart-class" ' + 'title=' + data[i].depart + '>'
        + data[i].depart + '</div>' 
        + '</div></li>';
    }

    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中调用形式：

<!-- html -->
<div id="downListDIV">
</div>
<script text/type="javascript">
    $("#downListDIV").customeDownList({url:'/common/getUserListData'});
</script>

获取选择数据：

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

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

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

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

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