Überprüfen, ob td Text enthält?

Question

Ich arbeite an einem kleinen Projekt und ich brauche die Funktionalität, wo die Tabellenzeilen ausgeblendet werden, wenn ihre td.icaoIata nicht die Zeichenfolge enthält, die in der Eingabezeile eingegeben wird. Darüber hinaus werden sie ausgeblendet/angezeigt, wenn ihr Datenattribut im Bereich eines Jquery-Schiebereglers liegt. Dieser Teil habe ich gearbeitet und sollte nicht relevant sein.

Wenn die Zeichenfolge nicht gefunden wird, ausblenden Sie die Zeile grundsätzlich. Sobald das Eingabefeld aktualisiert ist, überprüfen Sie erneut, und verstecken/zeigen Sie, wenn immer noch nicht gefunden/gefunden.

Meine Probleme waren meist mit der Kombination verschiedener Funktionen wie find(),: enthält usw., die ich nicht zusammen arbeiten konnte.

Ich hoffe, ich bin klar genug.

Kann mir jemand zu einer Lösung führen?

Hier ist mein Code. Vielen Dank!

<input type="text" name="search" class="form-control searchinput" ><br> 
<div id="slider"></div> 
<div id="slider-value-lower"></div> 
<div id="slider-value-upper"></div> 
    <table class="table table-striped table-bordered"> 
     <thead> 
      <tr> 
       <th>Flight #</th> 
       <th>Departure</th> 
       <th>Arrival</th> 
       <th>Duration</th> 
       <th>Aircraft</th> 
       <th>Distance</th> 
       <th>Options</th> 
      </tr> 
     </thead> 
     <tbody class="schedules"> 
      <tr class="schedulerow" data-duration="1.4"> 
       <td><a href="">DLH1058</a></td> 
       <td class="icaoIata">Frankfurt Main <small>(EDDF)</small></td> 
       <td class="icaoIata">Cote D'Azur <small>(LFMN)</small></td> 
       <td> 1.4 h</td> 
       <td class="icaoIata"> 
        A320 
       </td> 
       <td>386 nm</td> 
       <td> 
        <a href="" class="btn btn-success">Book</a> 
       </td> 
      </tr> 
      ............ 

     </tbody> 
    </table> 

Und mein JS

var slider = document.getElementById('slider'); 

noUiSlider.create(slider, { 

    connect: true, 
    start: [0,3], 
    step: 0.5, 
    tooltips: true, 
    range: { 
     'min': 0, 
     'max': 20 
    } 
}); 
//initialize the values 
$(".schedules").children().hide().filter(function() { 
    var duration = $(this).data('duration'); 
    return duration >= 0 && duration <= 3; 
}).addClass('is-shown').show(); 

$(".searchinput").keyup(function() { 
    var content = $(".searchinput").val(); 
    //My mess was here.... 
}); 

slider.noUiSlider.on('change', function(values, handle) { 

    /*sliderValues[handle].innerHTML = values[handle];*/ 
    filterRows(values[0], values[1]); 
}); 

function filterRows(min, max) { 
    $(".schedules").children().removeClass('is-shown').hide().filter(function() { 
     var duration = $(this).data('duration'); 
     return duration >= min && duration <= max; 
    }).addClass('is-shown').show(); 
} 

So

Answer 1

Da die Filter bereits Anwendung ist, kann aus mehreren Quellen (den Schieber und das Eingabefeld) eingestellt werden, ich ein eigenes Objekt halten würde, wo die Filtereinstellungen gehalten werden (auch für DRY Einstellung der nützlichen Werte)

z

var filter ={ 
    min: 0, 
    max: 3, 
    text : '' 
}; 

wo min und max sind die Dauern und Text ist der Suchtext.

Die filterRows Methode kann das Filterobjekt verwenden und muss nicht die Parameter:

function filterRows() { 
    $(".schedules").children().removeClass('is-shown').hide().filter(function() { 
     var duration = $(this).data('duration'); 
     return duration >= filter.min && duration <= filter.max 
      && (!filter.text || $(this).children('td.icaoIata').filter(function(){return $(this).text().toLowerCase().indexOf(filter.text) !== -1;}).length); 
    }).addClass('is-shown').show(); 
} 

Der Schieber und Eingabe sollte die richtigen Filterwerte gesetzt und die filterRows Methode aufrufen.

Beispiel fiddle

Answer 2

Verwenden .filter() dafür.

var content = $(".searchinput").val(); 

$('.schedules tr') 
    .show() // first show all tr 
    .filter(function() { 
     // return only tr that does not contain "content" value 
     var match = false; 

     $(this).find('.icaoIata').each(function() { 
      if ($(this).text().toLowerCase().indexOf(content) == -1) { 
       match = true; 
      } 
     }); 

     return match; 
    }) 
    .hide();