在（禁用）输入字段上的搜索功能

Question

I have a simple search function that I use on a table of information, but since I turned the text in the table into editable fields the search function isn't working anymore.

I tried to troubleshoot it in a few different ways, but can't seem to get it working.

Here's what I have got so far:

var $rows = $('.list #data');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

$rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
}).hide();
});

This works just fine on simple plain text tables. Here's a JSFiddle that shows you what I am trying to accomplish:

https://jsfiddle.net/je9mc9jp/8/

Answer 1

//SEARCH
var $rows = $('.list input');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).val().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Answer 2

Went a little deeper on this issue with a friend of mine and we managed to get what we wanted working.

Bob's answer was alright, but the problem was it wouldn't return the whole row of results. Just the specific term you searched for!

Here's what worked for me:

var $rows = $('.list .edit');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
        $rows.parents("tr").hide()
    var x = $rows.show().filter(function() {
        var text = $(this).val().replace(/\s+/g, ' ').toLowerCase();

        if(text.indexOf(val) > -1)
            return $(this);
    });     

    $(x).each(function(){
        $(this).parents("tr").show();
    });
});

JSFiddle demo