jQuery查找关键词 符合列表文字高亮显示

原创 1130331201 随笔 JS 64阅读 24 天前 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.highlight{color: #f00;}
</style>
</head>
<body>
<div id="form" class="text-c"></div>
<div class="mt-10 safe-mgs search-keyword" id="xx" style="background: #eee;padding: 15px;">
<ul>
<li>
<input type="checkbox" />
<label>
<div class="list_msg">
<span> <a>订单编号:</a>
<a class="c">126666</a>
</span>
</div>
</label>
</li>
</ul>
<ul>
<li>
<input type="checkbox" />
<label>
<div class="list_msg">
<span> <a>订单编号:</a>
<a class="c">88888</a>
</span>
</div>
</label>
</li>
</ul>
<ul>
<li>
<input type="checkbox" />
<label>
<div class="list_msg">
<span> <a>订单编号:</a>
<a class="c">234343</a>
</span>
</div>
</label>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
// 搜索
jQuery.expr[':'].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function filterList(header, list) {
var form = $("<div>").attr({
"class": "filterform"
}), input = $("<input>").attr({
"class": "mui-input-clear",
"type": "search",
"placeholder": "请输入搜索内容",
"id": "text-search"
});
$(form).append(input).appendTo(header);
$(input).change(
function() {
var filter = $(this).val();
if (filter) {
$matches = $(list).find(
'a:Contains(' + filter + ') , ul:Contains(' + filter + '), li:Contains(' + filter + ')');
$('li', list).not($matches).slideUp();
$matches.slideDown();
} else {
$(list).find("li").slideDown();
}
return false;
}).keyup(function() {
$(this).change();
});
}

    $(function() {
        filterList($("#form"), $("#xx"));
    });
    // 查询出文字变红
    jQuery.fn.highlight = function(pat) {
        function innerHighlight(node, pat) {
            var skip = 0;
            if (node.nodeType == 3) {
                var pos = node.data.toUpperCase().indexOf(pat);
                if (pos >= 0) {
                    var spannode = document.createElement('span');
                    spannode.className = 'highlight';
                    var middlebit = node.splitText(pos);
                    var endbit = middlebit.splitText(pat.length);
                    var middleclone = middlebit.cloneNode(true);
                    spannode.appendChild(middleclone);
                    middlebit.parentNode.replaceChild(spannode, middlebit);
                    skip = 1;
                }
            } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
                for ( var i = 0; i < node.childNodes.length; ++i) {
                    i += innerHighlight(node.childNodes[i], pat);
                }
            }
            return skip;
        }
        return this.each(function() {
            innerHighlight(this, pat.toUpperCase());
        });
    };
    jQuery.fn.removeHighlight = function() {
        function newNormalize(node) {
            for ( var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
                var child = children[i];
                if (child.nodeType == 1) {
                    newNormalize(child);
                    continue;
                }
                if (child.nodeType != 3) {
                    continue;
                }
                var next = child.nextSibling;
                if (next == null || next.nodeType != 3) {
                    continue;
                }
                var combined_text = child.nodeValue + next.nodeValue;
                new_node = node.ownerDocument.createTextNode(combined_text);
                node.insertBefore(new_node, child);
                node.removeChild(child);
                node.removeChild(next);
                i--;
                nodeCount--;
            }
        }
        return this.find("span.highlight").each(function() {
            var thisParent = this.parentNode;
            thisParent.replaceChild(this.firstChild, this);
            newNormalize(thisParent);
        }).end();
    };
    $(function() {
        $('#text-search').bind('keyup change', function(ev) {
            var searchTerm = $(this).val();
            $('.search-keyword').removeHighlight();
            if (searchTerm) {
                $('.search-keyword').highlight(searchTerm);
            }
        });
    });
    // 查询出文字变红end

    </script>
</body>

</html>

评论 ( 1 )
最新评论
lyj4532556 23 天前 1F

方便大家预览