jQuery实现搜索自动提示(搜索筛选)

POST TIME: 2014-10-09 00:22:26

通过jquery做内容关键字搜索筛选功能,适用于列表内容较多不易查找的页面,也可用于搜索框提示。

HTML代码

<div id="demo-wrap">
	<div class="product-head">
		<p>搜索列表内容:</p>
		<div id="form"></div>
	</div>
	<ul id="demo-list">
		<li><a href="#">张三</a></li>
		<li><a href="#">李四</a></li>
		<li><a href="#">jQuery</a></li>
		<li><a href="#">Apple</a></li>
		<li><a href="#">AAAAAAA</a></li>
		<li><a href="#">BBBBBBB</a></li>
		<li><a href="#">BCCCCCCC</a></li>
		<li><a href="#">CCCCCCC</a></li>
		<li><a href="#">CDDDDD</a></li>
		<li><a href="#">CAAAAA</a></li>
		<li><a href="#">EEDDDDDD</a></li>
		<li><a href="#">Feeee</a></li>
		<li><a href="#">ACCCCCCC</a></li>
		<li><a href="#">FEEEEEEEE</a></li>
		<li><a href="#">jJack</a></li>
	</ul>
</div>

jQuery代码

(function($) {
    $.expr[":"].Contains = function(a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };
    function filterList(header, list) {
        //@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"), $("#demo-list"));
    });
})(jQuery);	

文章转载请注明出处:https://ynxy999.com/Article/view/id/1695.shtml

分享到:
一个市值15亿美元的公司为何会突然破产 大明帝国的不世武功:点评明朝战史上的七大胜仗

告诉我们您的需求

  我们将在一个工作日之内回复您
昆明地址:新闻路429号文化空间25层1055711410
安宁地址:安宁市县街镇麒麟路17号云南经济管理学院图书馆406室、305室ynxy999_com
免费热线:15287195860
售前热线:0871-68034467-999

Copyright 2011-2018,All Rights Reserved ynxy999.com co.ltd.云南炫烨科技有限公司 Powered by ynxy999.com 滇公网安备 53010202000225号  滇ICP备15002943号  [技术支持昆明锦华科技]