CODEWITHSUNDEEP
javascriptjquery
EarlyCoder
EarlyCoder

Reputation: 1313

jQuery Search for an element within a table

I'm new to jQuery and need help on searching for user-typed element within a table. I wrote this in JS, but have a problem writing in using jQuery.

When the element is found, the other rows in the table with the same class name should be visible and other rows should be hidden:

$(document).ready(function()
    {
    search(".site-table", "#recordInput");
    console.log("Document is ready");
    }
);

function search(search_table, search_field)
{

    // Searching for an item specified in search_field within a table


    $(search_field).on("keyup", function() 
    {
        var target_text = $(this).val().toLowerCase();

        //Hide everything first
        $(search_table).find('tr').addClass(".hidden");

        $(search_table).find('tr').each(function(index, element){
            // For each row, find out if the row has the target_text in it
            $element:contains($target_text).each(function(index, element){
                $(element).removeClass(".hidden");
            });

            // for each row with the target text in it, find other rows with this rows class name in their class name and show them.  Any other row should be hidden



    });

Any help is appreciated.

EDIT 1:

So, here is the editted code after the comments. I still cannot get it working:

$(document).ready(function()
{
search(".site-table", "#recordInput");
console.log("Document is ready");
}

);

function search($search_table, $search_field)
{
    console.log("Starting to search...");

    $($search_field).on("keyup", function() 
    {
        // Heighlight the search field 
        $(this).css('border', '1px solid red');

        $search_text = $(this).val().toLowerCase();

        // 1st method:
        $search_result = $($search_table).find('tbody tr').text().toLowerCase().indexOf($search_text > -1);  // Does not work!  Nothing is found when there is a match
        console.log("Search Result: ", $search_result);


        // 2nd method:
        $($search_table).find('tr').each(function(index, element){
            // For each row, toggle the hidden class if the row contains the search text
            $(this).toggleClass('hidden', $(this).text().toLowerCase().indexOf($search_text > -1));
        });

        // 3rd method:
        var found = $($search_table).find('tbody tr').filter(function() {
            return $(this).text().toLowerCase() == $search_text;  
        });

        console.log("found: ", found);    
    });
}

None of these methods works! What am I doing wrong in each method?

Upvotes: 0

Views: 226

Answers (1)

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

Your problem is about using the indexOf. What you must put between the parentheses is only the searching text and > -1 must be out. See this sample: 

var its_ok = $('div').first().html().indexOf('b') >  -1
console.log('first one: ', its_ok)

var its_not_ok = $('div').first().html().indexOf('b' >  -1)
console.log('second one: ', its_not_ok)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>abcd</div>

What you have done is the second one that is not true way of using the indexOf.

Upvotes: 1

Related Questions