模糊查询输入框

css部分：

<style type="text/css">
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
        margin:0;
        padding:0;
    }

    .nice-select input{
        outline: none;
        cursor: pointer;
        width: 14em;
        height: 1.8em;
        font-size: 1em;
        border: 1px solid #000;
        background: url(image/icon.png) no-repeat scroll right center transparent;
        background-position: 96% 50%;
        padding: 0 10px;
        -webkit-border-radius: .3em;
        -moz-border-radius: .3em;
        border-radius: .3em;
        position: absolute;
        line-height: 1.8em;
    }

    ul{
        list-style: none;
    }

    .nice-select{
        position: relative;
        width: 14em;
       margin: 20px;
        box-shadow: 0 3px 5px #999;
        -webkit-border-radius: .3em;
        -moz-border-radius: .3em;
        border-radius: .3em;
    }

    .nice-select ul{
        display: none;
        border: 1px solid #d5d5d5;
        width: 13.9em;
        position: absolute;
        top: 1.8em;
        overflow: hidden;
        background-color: #fff;
        max-height: 150px;
        overflow-y: auto;
        border-top: 0;
        z-index: 10001;
    }

    .nice-select ul li{
        height: 30px;
        line-height: 2em;
        overflow: hidden;
        padding: 0 10px;
        cursor: pointer;
        border-top: 1px solid #d5d5d5;
    }

    .nice-select ul li.on{background-color: #e0e0e0;}

</style>

html部分：

<div class="nice-select">
    <input id="customerId" type="text" oninput="searchList(this.value)">
    <ul>
        <li>Java--我的最爱</li>
        <li>PHP--很棒的wo</li>
        <li>HTML--简单</li>
        <li>jQuery--有点难</li>
        <li>Android--安卓</li>
        <li>C--不会</li>
        <li>C++--更不会</li>
        <li>Struts--懂哦</li>
        <li>hibernate--已经不怎么懂</li>
        <li>spring--懂哦</li>
        <li>0123456789--10</li>
    </ul>
</div>

js部分：（此处需要引入jquery.js）

<script type="text/javascript">
    $(function(){
        $(".nice-select").click(function(e){
            $(this).find("ul").show();
            e.stopPropagation();
        });

        $(".nice-select ul li").hover(function(e){
            $(this).toggleClass("on");
            e.stopPropagation();
        });

        $(".nice-select ul li").click(function(e){
            var val = $(this).text();
            val = val.substring(0, val.indexOf('--'));
            $(".nice-select").find("input").val(val);
            $(".nice-select").find("ul").hide();
            e.stopPropagation();
        });

        $(document).click(function(){
            $(".nice-select").find("ul").hide();
        });
    });

    function searchList(strValue) {
        var count = 0;
        if (strValue != "") {
            $(".nice-select ul li").each(function(i) {
                var contentValue = $(this).text();
                if ((contentValue.indexOf(strValue.toLowerCase()) < 0)
                        && (contentValue.indexOf(strValue.toUpperCase()) < 0)) {
                    $(this).css("display", "none");
                    count++;
                } else {
                    $(this).css("display", "block");
                }
                if (count == (i + 1)) {
                    $(".nice-select").find("ul").hide();
                } else {
                    $(".nice-select").find("ul").show();
                }
            });
        } else {
            $(".nice-select ul li").each(function(i) {
                $(this).css("display", "block");
            });
        }
    }

</script>

 

转载于:https://www.cnblogs.com/shanhaihong/p/5691240.html