есть ли способ выполнить поиск в таблице и показать несколько подключенных tr - PullRequest
Новая
       6

есть ли способ выполнить поиск в таблице и показать несколько подключенных tr

0 голосов
/ 06 мая 2020
• 1000 подключены к нему.

Можно ли этого добиться с помощью jquery? Мой код для поиска ищет только tr и не показывает подключенные tr. Я хотел бы иметь такую ​​же функцию поиска, как и на YouTube.

Ниже приведен код, с которым я работаю 

$(".filter").change(function() {
  var filterValue = $(this).val();
  var row = $('.row');

  row.hide()
  row.each(function(i, el) {
    if ($(el).attr('data-type') == filterValue) {
      $(el).show();
    }
  })

});

$(document).ready(function() {

  (function($) {

    $('#filter1').keyup(function() {

      var rex = new RegExp($(this).val(), 'i');
      $('.searchable tr').hide();
      $('.searchable tr').filter(function() {
        return rex.test($(this).text());
      }).show();

    })

  }(jQuery));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="filter1" type="search" placeholder="Search "></form>

<Br>
<label for="filter">Show videos of specific Category:</label>
<select class="filter" data-tableId="table1">
  <option value="all">All</option>
  <option value="music">Music </option>
  <option value="art">art</option>
  <option value="dance">dance</option>
</select>


<table id="table1">
  <tbody class="searchable">
    <tr class="row" data-type="music">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music 1</a></td>
    </tr>
    <tr class="row" data-type="music">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row" data-type="music">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row" data-type="music">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>


    <tr class="row" data-type="art">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
    </tr>
    <tr class="row" data-type="art">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row" data-type="art">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row" data-type="art">
      <td class="b"><span class="child">Category : art </span></td>
    </tr>

    <tr class="row" data-type="music">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
    </tr>
    <tr class="row" data-type="dance">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row" data-type="dance">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row" data-type="dance">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>



</table>

Ответы [ 2 ]

1 голос
/ 06 мая 2020

Что касается выбора, вы должны убедиться, что вы показываете все, когда выбрано all, а также вы можете упростить show() с помощью специального селектора c:

Что касается поиска по текста, я бы поискал в каждой ячейке с заголовком (вы использовали класс a2).

Кроме того, я бы создал элемент, который обертывает каждый элемент. Теперь у вас есть несколько <tr> верхнего уровня, принадлежащих одному и тому же элементу. Я бы сделал один <tr> для каждого элемента, а затем несколько <td> для каждого поля (эскиз, заголовок, дата и т. Д. c.) Я просто использовал <tr>, но вы можете использовать <tbody>, если хотите . 

$(document).ready(function() {
  (function($) {

$(".filter").change(function() {
  var filterValue = $(this).val();
  var $rows = $('.row');

  if (filterValue === 'all') {
    $rows.show();
  } else {
    $rows.hide();
    $(".row[data-type='" + filterValue + "']").show();
  }
});

$('#filter1').keyup(function() {
  var filterText = $(this).val().trim();
  var $rows = $('.row');

  // make sure that the filter of the select box is applied
  $(".filter").change();

  if (filterText === '') {
    // do nothing
  } else {
      var rex = new RegExp(filterText, 'i');
      $('.searchable .a2').filter( function () { return !rex.test($(this).text().trim()); } )
                          .closest('.row')
                          .hide();
  }
});

  }(jQuery));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="filter1" type="search" placeholder="Search "></form>

<Br>
<label for="filter">Show videos of specific Category:</label>
<select class="filter" data-tableId="table1">
  <option value="all">All</option>
  <option value="music">Music </option>
  <option value="art">art</option>
  <option value="dance">dance</option>
</select>


<table id="table1" class="searchable">
  <tbody class="row" data-type="music">
    <tr>
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music 1</a></td>
    </tr>
    <tr>
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>

  <tbody class="row" data-type="art">
    <tr>
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
    </tr>
    <tr>
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>

  <tbody class="row" data-type="art">
    <tr>
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 2</a></td>
    </tr>
    <tr>
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>

  <tbody class="row" data-type="dance">
    <tr>
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
    </tr>
    <tr>
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>

  <tbody class="row" data-type="dance">
    <tr>
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 2</a></td>
    </tr>
    <tr>
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr>
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
</table>
1 голос
/ 06 мая 2020

Вот начало. Вам нужно тело для каждой песни

Я изменил тип данных в каждой строке на класс для каждого тела

Я также использовал код из

regex javascript - сопоставить несколько условий поиска, игнорируя их порядок

, чтобы создать регулярное выражение с поиском без порядка 

const find = () => {
  let val = $('#filter1').val();
  val = val.replace(/[^\w]/g," ").replace(/\s+/g," "); // normalise the string
  var reString = '(?=.*' + val.split(/\s/).join(')(?=.*') + ')'; // (?=.*party)(?=.*dance) any order
  console.log(reString)
  var rex = new RegExp(reString, 'gi');
  var category = $(".filter").val();
  var selector = '.searchable' + (category ? "." + category : "");
  $('.searchable').hide();
  $(selector).filter(function() {
    return rex.test($(this).text());
  }).show();
};

$(function() {
  $(".filter").change(function() {
    var filterValue = $(this).val();
    $('.searchable')
      .each(function(i, el) {
        let found = false;
        if ($(el).hasClass(filterValue)) {
          found = true;
        }
        $(el).toggle(found || filterValue === "");
      })
    find();
  });
  $('#filter1').on("input", find);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="filter1" type="search" placeholder="Search "></form>

<Br>
<label for="filter">Show videos of specific Category:</label>
<select class="filter" data-tableId="table1">
  <option value="">All</option>
  <option value="music">Music </option>
  <option value="art">Art</option>
  <option value="dance">Dance</option>
</select>


<table id="table1">
  <tbody class="searchable music">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">Music dance video party song</a></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : Music  </span></td>
    </tr>
  </tbody>
  <tbody class="searchable art">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">art 1</a></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : art </span></td>
    </tr>
  </tbody>
  <tbody class="searchable dance">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 1</a></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 15-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
  <tbody class="searchable dance">
    <tr class="row">
      <td rowspan="4" class="a"><img src="https://img.youtube.com/vi/{{youtube video code }}/default.jpg" alt="" /></td>
      <td class="a2"><a href="{{LINK to Yotube video}}">dance 2</a></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">  Date : 16-Apr-20 </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Length : </span></td>
    </tr>
    <tr class="row">
      <td class="b"><span class="child">Category : dance  </span></td>
    </tr>
  </tbody>
</table>
...