I am trying to filter the definitions by using the live search box. It works, however it is very slow. How can I optimize my JS/jQuery to run quicker?
JSFiddle: https://jsfiddle.net/JFlattery/2c9dpp8p/
HTML:
<div class="ms-rte-layoutszone-inner">
<div id="floatNav"><a href="#outerShell">↑ Back to Top ↑</a></div>
<div id="outerShell">
<div class="backButton">
<div>«Back</div>
</div>
<div id="PageTitle">
<center>
<h1>Terminology</h1>
</center>
</div>
<div id="letterMenu">
<a href="#A" class="letterA"> A </a>
<a href="#B" class="letterB"> B </a>
<a href="#C" class="letterC"> C </a>
<a href="#D" class="letterD"> D </a>
<a href="#E" class="letterE"> E </a>
<a href="#F" class="letterF"> F </a>
<a href="#G" class="letterG"> G </a>
<a href="#H" class="letterH"> H </a>
<a href="#I" class="letterI"> I </a>
<a href="#J" class="letterJ"> J </a>
<a href="#K" class="letterK"> K </a>
<a href="#L" class="letterL"> L </a>
<a href="#M" class="letterM"> M </a>
<a href="#N" class="letterN"> N </a>
<a href="#O" class="letterO"> O </a>
<a href="#P" class="letterP"> P </a>
<a href="#Q" class="letterQ"> Q </a>
<a href="#R" class="letterR"> R </a>
<a href="#S" class="letterS"> S </a>
<a href="#T" class="letterT"> T </a>
<a href="#U" class="letterU"> U </a>
<a href="#V" class="letterV"> V </a>
<a href="#W" class="letterW"> W </a>
<a href="#X" class="letterX"> X </a>
<a href="#Y" class="letterY"> Y </a>
<a href="#Z" class="letterZ"> Z </a>
</div>
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<legend>Search:</legend>
<input type="text" class="text-input" id="filter" value="" />
</fieldset>
</form>
<div class="table" id="letterTable">
<h3 id="A" class="letterA">A...</h3>
<div class="letterSection letterA">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="B" class="letterB">B...</h3>
<div class="letterSection letterB">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="C" class="letterC">C...</h3>
<div class="letterSection letterC">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="D" class="letterD">D...</h3>
<div class="letterSection letterD">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="E" class="letterE">E...</h3>
<div class="letterSection letterE">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="F" class="letterF">F...</h3>
<div class="letterSection letterF">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="G" class="letterG">G...</h3>
<div class="letterSection letterG">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="H" class="letterH">H...</h3>
<div class="letterSection letterH">
<ul>
<li class="wordLine"><span class="term">Hubris</span> - <span class="definition">exaggerated pride or self-confidence</span> <span class="example"></span></li>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="I" class="letterI">I...</h3>
<div class="letterSection letterI">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="J" class="letterJ">J...</h3>
<div class="letterSection letterJ">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="K" class="letterK">K...</h3>
<div class="letterSection letterK">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="L" class="letterL">L...</h3>
<div class="letterSection letterL">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="M" class="letterM">M...</h3>
<div class="letterSection letterM">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="N" class="letterN">N...</h3>
<div class="letterSection letterN">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="O" class="letterO">O...</h3>
<div class="letterSection letterO">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="P" class="letterP">P...</h3>
<div class="letterSection letterP">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="Q" class="letterQ">Q...</h3>
<div class="letterSection letterQ">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="R" class="letterR">R...</h3>
<div class="letterSection letterR">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="S" class="letterS">S...</h3>
<div class="letterSection letterS">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="T" class="letterT">T...</h3>
<div class="letterSection letterT">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="U" class="letterU">U...</h3>
<div class="letterSection letterU">
<ul>
<li class="wordLine"><span class="term">Urbane</span> - <span class="definition"></span>notably polite or polished in manner<span class="example"></span></li>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="V" class="letterV">V...</h3>
<div class="letterSection letterV">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="W" class="letterW">W...</h3>
<div class="letterSection letterW">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="X" class="letterX">X...</h3>
<div class="letterSection letterX">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="Y" class="letterY">Y...</h3>
<div class="letterSection letterY">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
<h3 id="Z" class="letterZ">Z...</h3>
<div class="letterSection letterZ">
<ul>
<li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
</ul>
</div>
</div>
</div>
<div class="backButton">
<div>«Back</div>
</div>
</div>
JS:
$(document).ready(function() {
function hideEmpties() {
$(".term:empty").parent().hide();
$('.letterSection').each(function() {
$("." + (/letter[A-Z]\b/g).exec($(this).attr("class"))).show();
if (!($(this).children('ul').children('li').is(':visible'))) {
$("." + (/letter[A-Z]\b/g).exec($(this).attr("class"))).hide();
}
});
}
hideEmpties();
$("#filter").keyup(function() {
// Retrieve the input field text
var filter = $(this).val();
// Loop through the comment list
$(".wordLine").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
hideEmpties();
// Show the list item if the phrase matches
} else {
$(this).show();
hideEmpties();
}
});
});
});
