Search function on (disabled) input fields

Question

I have a simple search function that I use in the information table, but since I turned the text into a table into editable fields, the search function no longer works.

I tried to fix it in several ways, but I can't get it to work.

Here is what I 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 just works fine in plain text tables. Here's a JSFiddle that shows you what I'm trying to accomplish:

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

Answer 1

I went a little deeper in this matter with my friend, and we managed to get what we wanted to work.

Bob's answer was fine, but the problem is that he will not return the entire row of results. Only the specific term you were looking for!

Here is 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

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