Question

i want to make something like a search box.
There’s a text box and a table as shown in the html code below:

<input id="sbox" type="text" class="textbox" value=""></input>
<table>
  <tr><td>lemon</td></tr>
  <tr><td>orange</td></tr>
  <tr><td>watermelon</td></tr>
  <tr><td>coconut</td></tr>
</table>

How can i use jQuery to look for the table row with the matching value.
for example user typed in lemon and the jquery will find the table row with the “lemon” value and display:none others which don’t have lemon value

and the results will be :

<input id="sbox" type="text" class="textbox" value=""></input>
<table>
  <tr><td>lemon</td></tr>
  <tr style="display:none;"><td>orange</td></tr>
  <tr style="display:none;"><td>watermelon</td></tr>
  <tr style="display:none;"><td>coconut</td></tr>
</table>

Answer 1

I’m not sure how you want to activate the search so I’ll pretend that you have a button with an id of “go”. You could use filter like this:

$('#go').click(function() {
    var want = $.trim($('#sbox').val());
    $('table tr > td').filter(function() {
        return $.trim($(this).text()) != want;
    }).parent().hide();
});

Demo: http://jsfiddle.net/ambiguous/qWaDs/2/

You might want to add some toLowerCase calls if you want a case-insensitive search:

$('#go').click(function() {
    var want = $.trim($('#sbox').val()).toLowerCase();
    $('table tr > td').filter(function() {
        return $.trim($(this).text()).toLowerCase() != want;
    }).parent().hide();
});

The $.trim calls are necessary in case your HTML ends up as:

<tr>
    <td>
        lemon
    </td>
</tr>
<!--...-->

If you don’t $.trim that row or cell you’ll end up with unwanted whitespace in your .text return value. There’s no good reason to bind your code’s behavior too tightly to the precise format of your HTML.