Databases
StackOverflow2013
Postsdbo
POjQuery search on large HTML page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery search on large HTML page
    text
    copied!<p>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.</p> <p>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. </p> <p>Here's the following code I just put together, works great except I'm having trouble comparing against lowerCase / upperCase. Any ideas. </p> <pre><code>$(document).ready(function() { $('#searchButton').click(function() { $(".searchresults").slideUp('fast', function(){ var arr = []; var htmlsbr = "Your Search Results:&lt;br /&gt;"; $('a:contains("' + $('#searchText').val() + '")').each(function() { arr.push($(this).text()+";"+$(this).attr('href')); }); $.each(arr, function(index, value) { htmlsbr = htmlsbr + '&lt;p&gt;&lt;a href="'+value.split(';')[1]+'" name="'+value.split('; ')[0]+'"&gt;'+value.split(';')[0]+'&lt;/a&gt;&lt;/p&gt;'; }); $(".searchresults").append(htmlsbr).slideDown('slow'); }).html(' '); }); }); &lt;/script&gt; &lt;style&gt; p {color: brown;} p.highlight {background-color: orange;} body {background-color: beige;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="searchresults"&gt;&lt;/div&gt; &lt;input id="searchText" value="second" /&gt; &lt;button id="searchButton"&gt;Search&lt;/button&gt; &lt;p&gt;&lt;a href="http://google.com" rel="this is the first entry."&gt;This is the first entry. &lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="http://ebay.com" rel="this is the second entry"&gt;This is the second entry. &lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="http://msn.com" rel="this is the third entry."&gt;This is the third entry. &lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href="http://yahoo.com" rel="this is the fourth entry."&gt;This is the fourth entry. &lt;/a&gt;&lt;/p&gt;' </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload