Menu
I have a page with more than 200 links with this kind of formatting.
<h1>
<a href="somelink">Somelink</a>
some text that explain the meaning of the link.
</h1>
Now, to make it bit easy to search through this link, i have put a search box.
My requirement is to search through all this tag and find the links that are relevant to the search box and hiding rest of the link.
How to do it in javascript ? ( i know basic javascript/jquery stuff but How to do full text search ? ) I do not required sorting according to relevant, just filter and show hide is good enough.
254
You can enumerate all h1 tags get inner html and do indexOf , or you can use jQuery it has a custom made contains functionality, which returns the elements having given text.
Here is an example copied from jQuery docs
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>
</body>
</html>
Hopefully you find this useful. It probably is not the elegant or most efficient but it will let you enter multiple search terms and gives partial matches (which may or may not be wanted). The way I have made it when you click the search button it will hide all other elements except ones matching either of your search terms but you can modify this to do whatever you want with the elements in the results Array. I don't recommend using this exactly but hopefully it will give you a point of reference on how you may want to implement your own (if you choose to go with a solution other than the quicksearch).
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' language='javascript' >
$(document).ready(function() {
var links = new Array();
$("h1").each(function(index, element) {
links.push({
text: $(this).text(),
element: element
});
});
$("#searchButton").click(function() {
var query = $("#searchBox").val();
var queryTerms = query.split(' ');
var results = new Array();
for(var i = 0; i < queryTerms.length; i++) {
for(var j = 0; j < links.length; j++) {
if (links[j].text.indexOf(queryTerms[i]) > -1) {
results.push(links[j].element);
}
}
}
$("h1").each(function(index, element) {
this.style.display = 'none';
});
for(var i = 0; i < results.length; i++) {
results[i].style.display = 'block';
}
});
});
</script>
</head>
<body>
<p>
<input id="searchBox" type="text" />
<input type="button" id="searchButton" value="Search" />
</p>
<h1>
<a href="somelink">Somelink1</a>
asdf
</h1>
<h1>
<a href="somelink">Somelink2</a>
ssss
</h1>
<h1>
<a href="somelink">Somelink3</a>
3333
</h1>
<h1>
<a href="somelink">Somelink4</a>
232323
</h1>
<h1>
<a href="somelink">Somelink5</a>
fffff
</h1>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
