Live search table with inputs fields

Question

Hope you can help me with this.

I'm trying to make a live search for a html table and i got it to work when each cell only contained text's. I then changed the text to input type="text" so that i can toggle read only. Now i'm trying to search the table and it works to 50%. I want to be able to search all inputs in each row as i did with text but it only takes the first input of each row now and i'm stuck.

Here is my code: Table wrapped table > tbody

<form method="post" action="'. $_SERVER["PHP_SELF"] .'" >
                <input type="hidden" name="id" value="' . $row['id'] . '">
                <tr>
                    <td style="font-weight: 700;">
                        <input class="name" type="text" name="name" value="' . $row['name'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="phone" value="' . $row['phone'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="email" value="' . $row['email'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="business_name" value="' . $row['business_name'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="title" value="' . $row['title'] . '" readonly>
                    </td>

                    <td class="actions send">
                        <a href="mailto:'. $row['email'] .'">
                        <i class="fa fa-send"></i>
                        </a>
                    </td>

                    <td class="actions edit">
                        <button type="submit" name="edit_people">
                        <i class="fa fa-pencil"></i>
                        </button>
                    </td>

                    <td class="actions contacted">
                        <button type="submit" name="contacted_people" value="' . $row['contacted'] . '">
                        <i class="fa fa-comment" style="' . $switch . '"></i>
                        </button>
                    </td>

                    <td class="actions remove">
                        <button type="submit" name="remove_people">
                        <i class="fa fa-close"></i>
                        </button>
                    </td>
                </tr>
            </form>

It loops trough my DB and outputs multiple TR

and here is my jquery

$("#Search").keyup(function() {
            _this = this;
            // Show only matching TR, hide rest of them
            $.each($('.addressbook tbody tr'), function() {
              if ($(this).find('input[type="text"]').val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                $(this).hide();
              else
                $(this).show();
            });
          });

Hope you can help me with this. Best / Fredrik

Possible duplicate of [Live search through table rows](https://stackoverflow.com/questions/12433304/live-search-through-table-rows) — Natesh bhat, Jan 16 '18 at 00:32

Rares Hideg · Accepted Answer · 2016-12-19T11:24:06.330

1

try this

var searchstring;
$("#Search").keyup(function() {
    searchstring = $(this).val();

    $.each($('.addressbook tbody tr'), function() {
        if($(this).find('input[type="text"][value*="'+searchstring+'"]').length > 0 || searchstring.trim().length == 0){
            // show
            $(this).show();
        }else{
            // hide
            $(this).hide();
        }

    });
});

check out examples of regex in the jquery documentation if needed

edited Dec 19 '16 at 11:24

answered Dec 19 '16 at 03:38

Rares Hideg

394
3
11

1

Works great, but i just noticed that if i clear my #Search input all fields are gone. any idea? – Bjurhager Dec 19 '16 at 07:40
I have updated the answer, I added the empty string condition ( searchstring.trim().length == 0 ) – Rares Hideg Dec 19 '16 at 11:24

Live search table with inputs fields

1 Answers1