找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发中jQuery实现的搜索列表过滤

2018-07-04 分类：jQuery 阅读(812) 评论(0)

eclipse怎么做前端开发|微信小程序前端开发上拉加载|前端开发和客户端开发工具

html 代码

<!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>

前端开发的技术架构设计|前端开发技术展望|web前端开发技术实验与实践

赞(0)
前端开发者 » 前端开发中jQuery实现的搜索列表过滤
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论