欢迎光临
我会一直在努力

用HTML5+jquery实现的搜索匹配效果

 

  • HTML5+jquery实现的搜索匹配效果,或者说是搜索过滤,当你在文本框输入一个字符时,如果下边的列表中有以此为开头的内容时,将自动为你显示相关内容,示例中仅列出了一些,用时候你可以自己再完善下,代码仅为您提供一种思路,我想对你是有帮助的。
  • <!DOCTYPE html>
    <head>
    <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://www.codefans.net/ajaxjs/jquery-1.6.2.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(‘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”), $(“#list”));
    });
    }(jQuery));
    </script>
    </head>
    <body>
    <noscript><div id=”noscript”>需要开启浏览器的JavaScript功能才能查看更多效果!</div></noscript>
    <div id=”container”>
    <div id=”wrap”>
    <div class=”product-head”>
    <h1>Product Search</h1>
    <div id=”form”></div>
    <div class=”clear”></div>
    </div>
    <ul id=”list”>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/apple.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Apple/”>Apple</a></li>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/broccoli.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Broccoli/”>Broccoli</a></li>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/carrot.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Carrot/”>Carrot</a></li>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/celery.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Celery/”>Celery</a></li>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/lettuce.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Lettuce/”>Lettuce</a></li>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/mushroom.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Mushroom/”>Mushroom</a></li>
    <li><img src=”http://www.codefans.net/jscss/demoimg/201401/onion.png” width=”30″ height=”30″ align=”absmiddle”/> <a href=”#/Onion/”>Onion</a></li>
    </ul>
    </div>
    </body>
    </html>
赞(3) 打赏
未经允许不得转载:前端范 » 用HTML5+jquery实现的搜索匹配效果
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏