Suchfunktion auf (deaktiviert) Eingabefelder

Question

Ich habe eine einfache Suchfunktion, die ich für eine Tabelle von Informationen verwende, aber da ich den Text in der Tabelle in editierbare Felder umwandelte, funktioniert die Suchfunktion nicht mehr.

Ich habe versucht, es auf ein paar verschiedene Arten zu beheben, aber es scheint nicht zu funktionieren.

Hier ist, was ich bisher habe:

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

Diese auf einfache Klartexttabellen ganz gut funktioniert. Hier ist ein JSFiddle, das zeigt Ihnen, was ich zu tun versuche:

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

Answer 1

Ging ein wenig tiefer in dieser Frage mit einem Freund von mir und wir haben es geschafft zu bekommen, was wir wollten arbeiten.

Bobs Antwort war in Ordnung, aber das Problem war, dass es nicht die ganze Reihe von Ergebnissen zurückgeben würde. Nur der von Ihnen gesuchte Begriff!

Hier ist, was für mich gearbeitet:

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