同じhtmlページに複数の語彙テーブルがあります。
各語彙テーブルの上で、ユーザーがテキスト入力フィールドに単語またはフレーズを入力して、入力された文字列（単語またはフレーズ）を含むテーブル行のみを表示できるようにしたいと思います。たとえば、テキスト入力フィールドに「good」と入力すると、文字列「good」を含まないテーブル行は表示されなくなります。http://www.amanado.com/idioma-colombiano/にアクセスし、「Vocabulario（oficial y de jerga）-palabras y frases comunes」をクリックしてアコーディオンセクションを展開し、「good」と入力すると、これはすでに機能しています。 「Ingresapalabraofrase en el siguiente campo parafiltrarlainformacióndelatabla」という単語の下のテキスト入力フィールドにあります。テキスト入力フィールドに「good」と入力すると、語彙テーブルの7行を除くすべてが消えます（7行が残ります）。
私は次の3つの問題を抱えています：
1）大文字と小文字がすでに正常に無視されているのと同じように、アクセント（たとえば、é、ñ、ü）を無視することはできません。たとえば、ユーザーが入力フィールドに「que」と入力した場合、「que」と「qué」を含む行が消えることはありません。ただし、「que」と入力すると、「qué」を含む行が誤って表示されなくなります。ご覧のとおり、入力フィールド（引用符を除く）に「que」と入力すると、「que」を含む2つのレコードが残ります。また、入力フィールド（引用符を除く）に「qué」と入力または貼り付けると、「qué」を含む6つのレコードが残ります。
2） jquery.highlight.jsのバージョンを使用して、残っている/消えない行の文字列の一致を強調表示しようとしています。これが視覚的にどのように見えるかの例として、この質問の要約の2番目の段落で指示されている入力フィールドに「que」と入力すると、文字列「que」が残り/消えない2行で強調表示されます。スクリプト"$（" table td "）。highlight（" que "）;"を挿入して "que"ハイライトをハードコーディングしたため、これは正しく機能しないことに注意してください。（a）jquery.highlight.jsがアクティブ/機能していることを示し、（b）強調表示されたテキストがどのように表示されるかを視覚的に示すために、htmlページの「head」セクションに挿入します。
3）ユーザーがフィールドに単語またはフレーズを入力して、入力された単語またはフレーズを含むテーブル行のみを表示できるようにするjavascriptに加えて、アクセント（たとえば、é、ñ、ü）を正常に無視できません。これは望ましい動作です。 jquery.highlight.jsスクリプトも、アクセント（たとえば、é、ñ、ü）を正常に無視していません。たとえば、この質問の概要の2番目の段落で指示されている入力フィールドに「pues」と入力すると、文字列「Qué」と「qué」の複数のケースが、残っている/消えない行で正常に強調表示されません。スクリプト「$（ "tabletd"）。highlight（ "que"）;」を挿入して、「que」ハイライトをハードコーディングしたことを思い出してください。HTMLページのセクションに挿入するので、文字列「que」、「qué」、「Que」、「Qué」文字列「que」、「qué」、「Que」、または「Qué」のいずれかが入力フィールドに入力された場合に残る/消えないテーブル行ですべて強調表示する必要があります。 （b）アクセント（例、é、ñ、ü）は無視されます。私が使用しているjquery.highlight.jsのバージョンには、「ignoreAccents」の機能が含まれていることに注意してください。
以下は次のとおりです。
（a）私のhtmlに表示される入力フィールド。
（b）ユーザーがフィールドに単語またはフレーズを入力して、入力された単語またはフレーズを含むテーブル行のみを表示できるようにするために使用しているJavaScript（簡潔にするために、これを以下「フィルターJavaScript」と呼びます） ）; と
（c）テキストを強調表示するために使用しているjquery.highlight.jsjavascriptのバージョン。
注：私はソフトウェアエンジニアではありませんが、誰かが具体的に何をすべきかを教えてくれた場合、変更を実装する方法を知っています（たとえば、この正確な変更を行ってから、この正確な変更を行ってから、この正確な変更を行います）。私は誰もが提供できるどんな援助にも感謝します、そして文字通りの指示は特にありがたいです。そして、最大限の成果を上げるために、最小限のコード（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.jsjavascriptはここから始まります
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.jsjavascriptはここで終了します
追加の注意事項/考慮事項はここから始まります
1）ユーザーがフィールドに単語またはフレーズを入力して、入力された単語またはフレーズを含むテーブル行のみを表示できるようにするために、すでに使用しているJavaScriptを拡張することを目的としています。これは、JavaScriptがすでに使用されているためです。上記の問題を除いて、usingは機能しています（私が公開した以前の質問に対するBeetrootの優れた貢献に感謝します）。
2）私が達成しようとしている機能に触れているjavascriptには、次の4つの例が含まれています（stackoverflowでは質問で2つ以上のリンクを使用できないため、「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 reのダイアログ：アクセント付き文字を無視する）
c） [http：// here] www.jquery.info/The-plugin-SearchHighlight（ハイライト機能を含む）; と
d） [http：// here] docs.jquery.com/UI/Effects/Highlight（ハイライト機能が含まれています。この質問の概要の段落2で参照されているWebサイトですでに「jqueryui」を使用していることに注意してください）。
追加の注意事項/考慮事項はここで終了します