模糊查询的下拉框

css部分：

<style type="text/css">
    #demo-wrap{position:relative;margin:20px;width:260px;overflow:hidden;border:1px solid #DDD;}
    #demo-wrap .product-head p{font-size:14px;font-family:Arial,Helvetica,sans-serif;margin:5px 3px 5px;padding:0 0 5px;}
    #demo-wrap .product-head{font-size:12px;padding:8px 4px;background-color:#F1F1F1;}
    #demo-wrap .filterform{border:1px solid #999;border-radius:15px;padding:4px 12px;background-color:#fff;}
    #demo-wrap .filterform input{font-size:12px;padding:0;border:0;outline:none;}
    ul#demo-list li{padding:8px;list-style:none;border-top:1px solid #ccc;border-bottom:1px solid #fff;}
    ul#demo-list li a{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:11px;text-decoration:none;}
    ul#demo-list{margin:0;padding:0;}
    .clear{clear:both;}
</style>

html部分：

<div id="demo-wrap">
    <div class="product-head">
        <p>搜索列表内容:</p>
        <div id="form">

        </div>
    </div>
    <ul id="demo-list">
        <li><a href="http://www.17sucai.com/">张三</a></li>
        <li><a href="http://www.17sucai.com/">李四</a></li>
        <li><a href="http://www.17sucai.com/">jQuery</a></li>
        <li><a href="http://www.17sucai.com/">Apple</a></li>
        <li><a href="http://www.17sucai.com/">AAAAAAA</a></li>
        <li><a href="http://www.17sucai.com/">BBBBBBB</a></li>
        <li><a href="http://www.17sucai.com/">BCCCCCCC</a></li>
        <li><a href="http://www.17sucai.com/">CCCCCCC</a></li>
        <li><a href="http://www.17sucai.com/">CDDDDD</a></li>
        <li><a href="http://www.17sucai.com/">CAAAAA</a></li>
        <li><a href="http://www.17sucai.com/">EEDDDDDD</a></li>
        <li><a href="http://www.17sucai.com/">Feeee</a></li>
        <li><a href="http://www.17sucai.com/">ACCCCCCC</a></li>
        <li><a href="http://www.17sucai.com/">FEEEEEEEE</a></li>
        <li><a href="http://www.17sucai.com/">jJack</a></li>
    </ul>
</div>

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

<script type="text/javascript">
    (function($) {
        $.expr[":"].Contains = function(a, i, m) {
            return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
        };
        function filterList(header, list) {
            //@header 头部元素
            //@list 无需列表
            //创建一个搜素表单
            var form = $("<form>").attr({
                "class":"filterform",
                action:"#"
            }), input = $("<input>").attr({
                "class":"filterinput",
                type:"text"
            });
            $(form).append(input).appendTo(header);
            $(input).change(function() {
                var filter = $(this).val();
                if (filter) {
                    $matches = $(list).find("a:Contains(" + filter + ")").parent();
                    $("li", list).not($matches).slideUp();
                    $matches.slideDown();
                } else {
                    $(list).find("li").slideDown();
                }
                return false;
            }).keyup(function() {
                $(this).change();
            });
        }
        $(function() {
            filterList($("#form"), $("#demo-list"));
        });
    })(jQuery);
</script>