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

最新推荐文章于 2022-12-22 13:51:44 发布

爱敲代码的程序猿

最新推荐文章于 2022-12-22 13:51:44 发布

阅读量1.7k

点赞数

分类专栏： jquery 文章标签： jquery 搜索

本文链接：https://blog.csdn.net/qq_36911154/article/details/78185522

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

可以直接复制代码，如果要拷贝到本地别忘了引用本地的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
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【26】jQuery实现的搜索列表过滤【好】

可以直接复制代码，如果要拷贝到本地别忘了引用本地的jq ；因为在这个csdn上不能直接预览想预览的话去（前端网）预览<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery实现的搜索列表过滤</title> <style> body{background: #fff; font-s
复制链接

扫一扫