仿百度搜索/dataList兼容IE／Safari的可下拉可输入框

html

<span>过敏药物名称 :</span>
<input type="text" placeholder="请输入过敏药物名称" id="content">
<ul id="search"></ul>
<script type="text/javascript" src="./jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.nicescroll.min.js"></script>

css

#content {
    width: 330px;
    height: 24px;
}
#search {
    position: absolute;
    top: 23px; 
    max-height: 190px !important; left: 86px;
    border: 1px solid #ccc;
    width: 330px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;
    display: none;
    z-index: 100;
}
#search >li {
    line-height: 24px;
    cursor: default;
    padding-left: 6px;
}
#search >li:hover {
    background-color: #eaf6ff;
}

js

$("#search").niceScroll({
    railpadding: { top:0, right: 0, left: 0, bottom:0 },
    cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0，IE8隐藏滚动条
    cursoropacitymax: 0 // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
});
$("#search").getNiceScroll().hide();// IE9+隐藏滚动条
var cur = 1;
$("#content").click(function (event) {
    $("#search").show();
    $(document).on("click", function () {//对document绑定一个影藏Div方法
        $("#search").hide();
    });
    event.stopPropagation();//阻止事件向上冒泡
    if(cur == 1) {//首次点击输入框搜索所有内容
        var val = $(this).val();
        $("#search").html(' ');
        $("#content_select option").each(function(i,item) {
            var name = $(item).text();
            if(name.indexOf(val) != -1) {
                $("#search").append('<li>'+name+'</li>');
            }
        });
        cur++;
    }
});
$(document).on('click',"#search >li",function (event) {
    event.stopPropagation();
    $("#content").val($(this).text());
    $("#content").css("color","#222");
    $(this).parents("#search").hide()
});
$("#content").keyup(function() {
    var val = $(this).val();
    $("#search").html(' ');
    $("#content_select option").each(function(i,item) {
        var name = $(item).text();
        if(name.indexOf(val) != -1) {
            $("#search").append('<li>'+name+'</li>');
        }
    });
});

转载于:https://my.oschina.net/u/3556145/blog/1585669