- <!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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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>
来源: http://www.qdfuns.com/note/39849/36f6ffb9d58c084afc2131c2028c61e5.html