(अक्षम) इनपुट फ़ील्ड पर खोजें फ़ंक्शन

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