検索機能のオン（無効）入力フィールド

Question

私は情報テーブルで使用する簡単な検索機能を持っていますが、テーブル内のテキストを編集可能なフィールドに変換して検索機能が動作しなくなりました。

私はいくつかの方法でトラブルシューティングを試みましたが、動作させるように見えませんでした。

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(); 
}); 

これは、単純なテキスト形式のテーブルでうまく動作します：ここで

は、私がこれまで持っているものです。ここで私が達成しようとしている何を示しているJSFiddleです：

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

Answer 1

は私の友人で、この問題について少し深く行って、我々が取り組んで欲しいものを得ることができました。

ボブの答えは問題ありませんでしたが、問題は結果の行全体を返さないということでした。あなたが検索した特定の用語だけ！

ここでは私のために働いていたものです：

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

Answer 2

//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(); 
});