Imagine I have a setup for organizing a television guide like this:
<div class="day">
<p>A Date</p>
<div class="time">
<p>A Time</p>
<div class="show">
<p>A Show</p>
<div class="info1">
<p>Info 1</p>
</div>
<div class="info2">
<p>Info 2</p>
</div>
<div class="info3">
<p>Info 3</p>
</div>
<div class="info4">
<p>Info 4</p>
</div>
</div>
</div>
</div>
The XML data consists of 2135 shows, 750 time slots, and 146 days. How can I efficiently search for a specific show name? The goal is to display only matching results and hide any containers that do not have visible shows after the search query is applied.
I already have a JavaScript/jQuery function in place for filtering the content based on user input. However, I'm looking for suggestions on how to optimize this process further. If there's a better way to structure the TV guide layout, please share your insights.
Another consideration is when it's advisable to offload some filtering tasks to the server-side. For instance, if handling over 2000 nodes on the client-side causes performance issues, would it be practical to prompt users to select a specific date range for viewing?
Edit:
search: function(selector, string) {
string = $.trim(string);
$(selector).each(function() {
if ( $(this).children("p").text().search(new RegExp(string, "i")) < 0 ) {
$(this).hide();
}
else {
$(this).show();
}
});
ctv.hideempty(".time");
},
hideempty: function(selector) {
$(selector).each(function () {
if ( $(this).children("div").is(":hidden") ) {
$(this).hide();
}
else {
$(this).show();
}
});
}
This code snippet showcases my current filtering approach, but I am open to feedback for improvement as there may be bugs present.