I think it should be simple, but I did not get a perfect run.
I'm developing a hotsite to make some slides, theories and codes available during the development of CodeLab's in certain programming languages, I've created a menu to separate by topics and subtopics.
I am having difficulty developing a field to perform the search, in the text field I am using the function in Javascript:
$("#search_box").on("keyup", function() {
if(!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,'');
};
}
var box = $(this);
var keyword = box.val().toLowerCase().trim();
$(".subtopic").each(function() {
var subtopicItem = $(this);
if (subtopicItem.text().toLowerCase().trim().indexOf(keyword) == -1) {
subtopicItem.hide();
}
else {
subtopicItem.show();
}
});
$(".topic").each(function() {
var topicItem = $(this);
if (topicItem.text().toLowerCase().trim().indexOf(keyword) == -1) {
topicItem.hide();
}
else {
topicItem.show();
}
});
});When we perform the subtopic search, the search returns only the subtopic by hiding the others, and also showing the topic in which it is related.
Example 1 : fetching the word "Introduction"
HTML & CSS - > Topic
Introduction - > Subtopic
Java - > Topic
Introduction - > Subtopic
C - > Topic
Introduction - > Subtopic
Example 2 : fetching the word "HTML"
HTML & CSS - > Topic
Expected : fetching the word "HTML"
HTML & CSS - > Topic
Introduction - > Subtopic
Table - > Subtopic
Lists - > Subtopic
Links - > Subtopic
... - > Subtopic
... - > Subtopic
I'd like to perform the following function: when we search for topics, also show all related subtopics on that subject.