JavaScript
var input, table, rows, noMatches, markInstance;
window.onload = function init() {
input = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
table = document.getElementById('myTable');
rows = table.querySelectorAll('tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
}
function ContactsearchFX() {
resetContent();
markInstance.unmark({
//mark.js works fine - highlight mark.js can be seen when the css show/hide function is disabled
done: highlightMatches
});
}
function resetContent() {
noMatches.textContent = '';
rows.forEach(function(row) {
row.classList.remove('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showParantRow,
noMatch: onNoMatches,
})
}
function showParantRow(element) {
var row = element.closest('tr');
row.classList.add('show');
//Show/hide table rows here
}
function onNoMatches(text) {
noMatches.textContent = 'No records match: "' + text + '"';
};
CSS
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid~.hints {
display: block;
}
#noMatches:empty, #noMatches:empty + .hints {
display: none;
}
.filterTable tr {
display: none;
}
.filterTable .show {
/*Show/hide - here*/
display: table-row;
}
mark {
background: orange;
font-weight: bold;
color: black;
}
HTML
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1 /mark.min.js"></script>
<div class="input-wrap">
<label>
Search Titles:
<input id="myInput" type="text" required
placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title", "Description", "Order" ...
</p>
</div>
<table id="myTable" style="width: 100%" class="filterTable">
<tr>
<td>*[this is where I insert my xsl/xslt data - refer to ][1]*</td>
</tr>
</table>
Протестировали код с Opera, Firefox, Chrome, ie9 / 11 и MS Edge,Все возвращают одну и ту же проблему.
Нужны подробности - напишите мне