I have a task to complete for work. I have a HTML page with a table of products. I need to present a search box that allows the user to enter a product to search for, then use jQuery to search the page for words that match and then attach them in a div above the table as well as grabbing the href that they link to.
It’s not possible to search the database as I don’t have access to the server, has anyone done this before or seen any good resources or plugins. It seems a relatively easy task but I’m short on time.
Here’s the following code I just put together, works great except I’m having trouble comparing against lowerCase / upperCase. Any ideas.
$(document).ready(function() {
$('#searchButton').click(function() {
$(".searchresults").slideUp('fast', function(){
var arr = [];
var htmlsbr = "Your Search Results:<br />";
$('a:contains("' + $('#searchText').val() + '")').each(function() {
arr.push($(this).text()+";"+$(this).attr('href'));
});
$.each(arr, function(index, value) {
htmlsbr = htmlsbr + '<p><a href="'+value.split(';')[1]+'" name="'+value.split('; ')[0]+'">'+value.split(';')[0]+'</a></p>';
});
$(".searchresults").append(htmlsbr).slideDown('slow');
}).html(' ');
});
});
</script>
<style>
p {color: brown;}
p.highlight {background-color: orange;}
body {background-color: beige;}
</style>
</head>
<body>
<div class="searchresults"></div>
<input id="searchText" value="second" />
<button id="searchButton">Search</button>
<p><a href="http://google.com" rel="this is the first entry.">This is the first entry. </a></p>
<p><a href="http://ebay.com" rel="this is the second entry">This is the second entry. </a></p>
<p><a href="http://msn.com" rel="this is the third entry.">This is the third entry. </a></p>
<p><a href="http://yahoo.com" rel="this is the fourth entry.">This is the fourth entry. </a></p>'
You could use the jQuery Replace Text plugin
Example (not tested) –