<script language="javascript" type="text/javascript" src="/Resources/Shared/Scripts/jquery/jquery.min.js"></script> 1:
2: </head>
3: <body>
4: <p style="text-align:right;width:500px;">
5: <span style="font-weight:bold;">Search:</span> <input type="text" id="txtSearch" name="txtSearch" maxlength="50" />
6: <img id="imgSearch" src="/images/cancel.gif" alt="Cancel Search" title="Cancel Search" style="width:150px;width:14px;height:14px;" />
7: </p>
8: <table id="tblSearch" cellpadding="2" cellspacing="0" border="1" style="width:500px;">
9: <tr style="font-weight:bold;">
10: <td>First</td>
11: <td>Last</td>
12: <td>Address</td>
13: <td>City</td>
14: <td>State</td>
15: </tr>
16: <tr>
17: <td>John</td>
18: <td>Dough</td>
19: <td>123 Main Street</td>
20: <td>Orlando</td>
21: <td>Florida</td>
22: </tr>
23: <tr>
24: <td>Jane</td>
25: <td>Dough</td>
26: <td>4367 South Washington Avenue</td>
27: <td>Bartow</td>
28: <td>California</td>
29: </tr>
30: <tr>
31: <td>Bart</td>
32: <td>Thompson</td>
33: <td>531 Townsend Circle</td>
34: <td>Atlanta</td>
35: <td>Georgia</td>
36: </tr>
37: <tr>
38: <td>Sherry</td>
39: <td>Simpson</td>
40: <td>3346 Presario Lane, Apt. 123</td>
41: <td>Seattle</td>
42: <td>Washington</td>
43: </tr>
44: <tr>
45: <td>Matt</td>
46: <td>Damon</td>
47: <td>300 Pounds Street</td>
48: <td>Boston</td>
49: <td>Massachusetts</td>
50: </tr>
51: </table>
52: <script language="javascript" type="text/javascript">
53: jQuery.expr[":"].containsNoCase = function(el, i, m) { 54: var search = m[3];
55: if (!search) return false;
56: return eval("/" + search + "/i").test($(el).text()); 57: };
58:
59: jQuery(document).ready(function() { 60: // used for the first example in the blog post
61: jQuery('li:contains(\'DotNetNuke\')').css('color', '#0000ff').css('font-weight', 'bold'); 62:
63: // hide the cancel search image
64: jQuery('#imgSearch').hide(); 65:
66: // reset the search when the cancel image is clicked
67: jQuery('#imgSearch').click(function() { 68: resetSearch();
69: });
70:
71: // cancel the search if the user presses the ESC key
72: jQuery('#txtSearch').keyup(function(event) { 73: if (event.keyCode == 27) { 74: resetSearch();
75: }
76: });
77:
78: // execute the search
79: jQuery('#txtSearch').keyup(function() { 80: // only search when there are 3 or more characters in the textbox
81: if (jQuery('#txtSearch').val().length > 2) { 82: // hide all rows
83: jQuery('#tblSearch tr').hide(); 84: // show the header row
85: jQuery('#tblSearch tr:first').show(); 86: // show the matching rows (using the containsNoCase from Rick Strahl)
87: jQuery('#tblSearch tr td:containsNoCase(\'' + jQuery('#txtSearch').val() + '\')').parent().show(); 88: // show the cancel search image
89: jQuery('#imgSearch').show(); 90: }
91: else if (jQuery('#txtSearch').val().length == 0) { 92: // if the user removed all of the text, reset the search
93: resetSearch();
94: }
95:
96: // if there were no matching rows, tell the user
97: if (jQuery('#tblSearch tr:visible').length == 1) { 98: // remove the norecords row if it already exists
99: jQuery('.norecords').remove(); 100: // add the norecords row
101: jQuery('#tblSearch').append('<tr class="norecords"><td colspan="5" class="Normal">No records were found</td></tr>'); 102: }
103: });
104: });
105:
106: function resetSearch() { 107: // clear the textbox
108: jQuery('#txtSearch').val(''); 109: // show all table rows
110: jQuery('#tblSearch tr').show(); 111: // remove any no records rows
112: jQuery('.norecords').remove(); 113: // remove the cancel search image
114: jQuery('#imgSearch').hide(); 115: // make sure we re-focus on the textbox for usability
116: jQuery('#txtSearch').focus(); 117: }
118:
</script>