【26】jQuery实现的搜索列表过滤【好】

来源：互联网发布：老虎机滚动抽奖js 编辑：程序博客网时间：2024/05/29 18:53

可以直接复制代码，如果要拷贝到本地别忘了引用本地的jq ；

因为在这个csdn上不能直接预览
想预览的话去（前端网）预览

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>jQuery实现的搜索列表过滤</title>    <style>        body{background: #fff; font-size: 13px;}        #wrap{position: relative;}        .product-head h1{font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin-bottom: 3px;margin-left: 3px;}        .product-head{font-size: 12px;padding: 4px;background-color: #ccc;width: 235px;}        .filterform input{font-size: 15px;padding: 3px;border: 1px solid #999;}        li{padding: 5px;margin: 3px;list-style: none;width: 230px;border-top: 1px solid #ccc;}        li a{color: #000;font-family: Arial, Helvetica, sans-serif;font-size: 11px}        ul{margin: 0;padding: 0;}        .clear{clear: both;}    </style>    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>    <script>        (function ($) {            jQuery.expr[':'].Contains = function(a,i,m){                return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;            };            function filterList(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('p:Contains(' + filter + ')').parent();                            $('li', list).not($matches).slideUp();                            $matches.slideDown();                        } else {                            $(list).find("li").slideDown();                        }                        return false;                    })                    .keyup( function () {                        $(this).change();                    });            }            $(function () {                filterList($("#form"), $("#list"));            });        }(jQuery));    </script></head><body><noscript><div id="noscript">需要开启浏览器的JavaScript功能才能查看更多效果!</div></noscript><div id="container">    <div id="wrap">        <div class="product-head">            <h1>搜索</h1>            <div id="form"></div>            <div class="clear"></div>        </div>        <ul id="list">            <li><p href="#/Apple/">html</p></li>            <li><p href="#/Broccoli/">css</p></li>            <li><p href="#/Carrot/">javascript</p></li>            <li><p href="#/Celery/">jQuery</p></li>            <li><p href="#/Lettuce/">less</p></li>            <li><p href="#/Mushroom/">sass</p></li>            <li><p href="#/Onion/">php</p></li>        </ul>    </div></body></html>

阅读全文

0 0