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

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

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


<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 = $("
").attr({"class":"filterform","action":"#"}), 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/">htmlp>li> <li><p href="#/Broccoli/">cssp>li> <li><p href="#/Carrot/">javascriptp>li> <li><p href="#/Celery/">jQueryp>li> <li><p href="#/Lettuce/">lessp>li> <li><p href="#/Mushroom/">sassp>li> <li><p href="#/Onion/">phpp>li> ul> div> body> html>

你可能感兴趣的:(jquery)