我在同一个 html 页面上有多个词汇表。
在每个词汇表上方，我想让用户在文本输入字段中键入单词或短语，以仅查看包含键入字符串（单词或短语）的表行。例如，如果您在文本输入字段中键入“good”，则不包含字符串“good”的表格行将消失。如果您访问http://www.amanado.com/idioma-colombiano/ ，这已经可以使用，单击“Vocabulario (oficial y de jerga) - palabras y frases comunes”以展开手风琴部分，然后键入“good ” 在“Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla”字样下方的文本输入字段中。在文本输入字段中输入“good”后，词汇表中除了 7 行之外的所有行都应该消失（剩下 7 行）。
我有以下3个问题：
1)我无法像已经成功忽略大小写一样忽略重音符号（例如，é、ñ、ü）。例如，如果用户在输入字段中输入“que”，则包含“que”和“qué”的行不应消失。但是，当您键入“que”时，包含“qué”的行会错误地消失。如您所见，如果您在输入字段中键入“que”（不包括引号），将保留 2 条包含“que”的记录。而且，如果您在输入字段中键入或粘贴“qué”（不包括引号），将保留 6 条包含“qué”的记录。
2）我正在尝试使用 jquery.highlight.js 的一个版本来突出显示保留/不消失的行中的字符串匹配项。有关这应如何直观显示的示例，请在此问题摘要的第 2 段中指示的输入字段中键入“que”，您将看到字符串“que”在保留/不消失的 2 行中突出显示。请注意，这不能正常工作，因为我通过插入脚本 "$("table td").highlight("que");" 硬编码了 "que" 突出显示 进入 html 页面的“head”部分，以证明 (a) jquery.highlight.js 处于活动状态/正常运行，以及 (b) 提供突出显示的文本应如何显示的视觉示例。
3)除了允许用户在字段中输入单词或短语以仅查看包含未成功忽略重音符号（例如，é、ñ、ü）的输入单词或短语的表行的 javascript 之外，这是所需的行为， jquery.highlight.js 脚本也没有成功忽略重音符号（例如，é、ñ、ü）。例如，在此问题摘要第 2 段中指示的输入字段中键入“pues”，您将在保留/不消失的行中成功突出显示字符串“Qué”和“qué”的多个案例。请记住，我通过插入脚本“$("table td").highlight("que");" 对“que”高亮进行了硬编码。进入html页面的部分，所以字符串“que”，“qué”，“Que”和“Qué” 如果在输入字段中输入任何字符串“que”、“qué”、“Que”或“Qué”，则应在保留/不消失的表格行中全部突出显示，因为它旨在 (a) 大小写和(b) 重音符号（例如 é、ñ、ü）被忽略。有趣的是，我正在使用的 jquery.highlight.js 版本中包含“ignoreAccents”的功能。
以下是：
(a)出现在我的 html 中的输入字段；
(b)我用来让用户在字段中输入单词或短语以仅查看包含输入的单词或短语的表行的 javascript（为简洁起见，以下称为“过滤器 javascript” ); 和
(c)我用来突出显示文本的 jquery.highlight.js javascript 版本。
请注意：我不是软件工程师，但如果有人告诉我具体要做什么，我确实知道如何实施更改（例如，进行确切的更改，然后进行确切的更改，然后进行确切的更改）。我感谢任何人可以提供的任何帮助，特别感谢文字说明。而且，我总是打算使用最少的代码（例如，javascript、css、html）来实现最多。
附加说明/注意事项包含在此问题摘要的底部。
(a) 输入字段从这里开始
<form class="live-search" action="" method="post">
<p>Ingresa palabra o frase en el siguiente campo para filtrar la información de la tabla</p>
<input class="input-text-tr" type="text" value="Mostrar sólo filas que contengan..." />
<span class="filter-count-tr"></span>
</form>
(a) 输入字段到此结束
(b) 过滤 javascript 从这里开始
$(function() {
$(".input-text-tr").on('keyup', function(e) {
var disallow = [37, 38, 39, 40];//ignore arrow keys
if($.inArray(e.which, disallow) > -1) {
return true;
}
var inputField = this,
val = this.value,
pattern = new RegExp(val, "i"),
$group = $(this).closest(".group"),
$trs = $group.find(".myTable tbody tr"),
$s;
if(val === '') {
$s = $trs;
}
else {
$s = $();
$trs.stop(true,true).each(function(i, tr) {
if(val !== inputField.value) {//if user has made another keystroke
return false;//break out of .each() and hence out of the event handler
}
$tr = $(tr);
if ($tr.text().match(pattern)) {
$s = $s.add(tr);
}
});
//$trs.not($s).fadeOut();
$trs.not($s).hide();
}
$group.find(".filter-count-tr").text("(" + $s.show ().length + ")");
}).on('focus blur', function() {
if (this.defaultValue == this.value) this.value = '';
else if (this.value == '') this.value = this.defaultValue;
});
$(".group").each(function() {
$this = $(this);
$this.find(".filter-count-tr").text("(" + $this.find("tbody tr").length + ")");
});
});
(b) 过滤 javascript 到此结束
(c) jquery.highlight.js javascript 从这里开始
jQuery.extend({
highlight: function (node, re, nodeName, className, ignoreAccents) {
if (node.nodeType === 3) {
var nodeData = node.data;
if (ignoreAccents) {
nodeData = jQuery.removeDiacratics(nodeData);
}
var match = nodeData.match(re);
if (match) {
var highlight = document.createElement(nodeName || 'span');
highlight.className = className || 'highlight'; var wordNode = node.splitText(match.index);
wordNode.splitText(match[0].length);
var wordClone = wordNode.cloneNode(true);
highlight.appendChild(wordClone);
wordNode.parentNode.replaceChild(highlight, wordNode);
return 1; //skip added node in parent
}
} else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
!/(script|style)/i.test(node.tagName) && // ignore script and style nodes
!(node.tagName === nodeName.toUpperCase() &&
node.className === className)) { // skip if already highlighted
for (var i = 0; i < node.childNodes.length; i++) {
i += jQuery.highlight(node.childNodes[i], re, nodeName, className, ignoreAccents);
}
}
return 0;
},
removeDiacratics : function(str) {
var rExps = [
{re:/[\xC0-\xC6]/g, ch:'A'},
{re:/[\xE0-\xE6]/g, ch:'a'},
{re:/[\xC8-\xCB]/g, ch:'E'},
{re:/[\xE8-\xEB]/g, ch:'e'},
{re:/[\xCC-\xCF]/g, ch:'I'},
{re:/[\xEC-\xEF]/g, ch:'i'},
{re:/[\xD2-\xD6]/g, ch:'O'},
{re:/[\xF2-\xF6]/g, ch:'o'},
{re:/[\xD9-\xDC]/g, ch:'U'},
{re:/[\xF9-\xFC]/g, ch:'u'},
{re:/[\xD1]/g, ch:'N'},
{re:/[\xF1]/g, ch:'n'}
];
for (var i = 0, len = rExps.length; i < len; i++) {
str = str.replace(rExps[i].re, rExps[i].ch);
}
return str;
}
});
jQuery.fn.unhighlight = function (options) {
var settings = { className: 'highlight', element: 'span' };
jQuery.extend(settings, options);
return this.find(settings.element + "." + settings.className).each(
function () {
var parent = this.parentNode;
parent.replaceChild(this.firstChild, this);
parent.normalize();
}).end();
};
jQuery.fn.highlight = function (words, options) {
var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false, ignoreAccents : true };
jQuery.extend(settings, options);
if (words.constructor === String) {
words = [words];
}
words = jQuery.grep(words, function(word, i) {
return word != '';
});
words = jQuery.map(words, function(word, i) {
return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
});
if (words.length == 0) {
return this;
}
var flag = settings.caseSensitive ? "" : "i";
var pattern = "(" + words.join("|") + ")";
if (settings.wordsOnly) {
pattern = "\\b" + pattern + "\\b";
}
var re = [];
re.push(new RegExp(pattern, flag));
if (settings.ignoreAccents) {
var wordsNoAccents = jQuery.map(words, function(word, i) {
return jQuery.removeDiacratics(word);
});
var patternNoAccents;
if (settings.wordsOnly) {
// workaround for word separation using \\b
patternNoAccents = "( " + wordsNoAccents.join("|") + " )";
patternNoAccents = "\\b" + patternNoAccents + "\\b";
} else {
patternNoAccents = "(" + wordsNoAccents.join("|") + ")";
}
if (patternNoAccents!=pattern) {
re.push(new RegExp(patternNoAccents, flag));
}
}
return this.each(function () {
for (var i in re) {
jQuery.highlight(this, re[i], settings.element, settings.className, settings.ignoreAccents);
}
});
};
(c) jquery.highlight.js javascript 到此结束
附加说明/注意事项从这里开始
1）我的意图是增强而不是背离我已经使用的 javascript，以使用户能够在字段中输入单词或短语以仅查看包含输入的单词或短语的表行，因为我已经是 javascript using 正在解决上述问题（感谢 Beetroot 对我发布的上一个问题的出色贡献）。
2）我发现涉及我想要实现的功能的javascript包括以下4个示例（注意因为stackoverflow不允许我在一个问题中使用多个链接，我将“http://”替换为以下示例中的“[http:// here]”）：
a) [http:// here]demopill.com/jquery-onpage-text-highlighter-and-filter.html [最接近我想要实现的功能；当用户在输入字段中输入文本时，似乎成功过滤和突出显示；成功忽略大小写，但没有成功忽略重音符号（例如，é、ñ、ü）]；
b） [http://here]stackoverflow.com/search?q=jquery.highlight.js（关于stackoverflow的对话：忽略重音字符）
c) [http:// here]www.jquery.info/The-plugin-SearchHighlight（包括高亮功能）；和
d） [http://here]docs.jquery.com/UI/Effects/Highlight（包括突出显示功能；请注意，我已经在本问题摘要第 2 段中引用的网站上使用“jquery ui”）。
附加说明/注意事项到此结束