Форум

Cresis · #1 (**permalink**) 06.10.2015, 23:24

Привет, есть поиск по таблице:Ссылка на кодепен
При вводе текста, который соответствует тексту в таблице, все остальные строчки обрезаются.
Суть в том, что по мимо обычных строчек, есть "категории"(строка на 4 колонки):

<tr> <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 1</td> </tr>

Нужно что бы по мимо результатов, выводилась соответствующая результату категория, т.е строка на 4 колонки которая находится выше результата.
Как нибудь это можно реализовать?

Код:

$(document).ready(function() {
  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
  $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
  });
    
  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });

  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });

  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' результат(ов)');

  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
		  });
});

Разметка таблицы(Таблица на бутстрапе, но это не важно)

<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results">
  <thead>
    <tr>
      <th>#</th>
      <th class="col-md-5 col-xs-5">Name / Surname</th>
      <th class="col-md-4 col-xs-4">Job</th>
      <th class="col-md-3 col-xs-3">City</th>
    </tr>
    <tr class="warning no-result">
      <td colspan="4"><i class="fa fa-warning"></i> No result</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Vatanay Özbeyli</td>
      <td>UI & UX</td>
      <td>Istanbul</td>
    </tr>
    <tr> <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 1</td> </tr>
    <tr>
      <th scope="row">2</th>
      <td>Burak Özkan</td>
      <td>Software Developer</td>
      <td>Istanbul</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Egemen Özbeyli</td>
      <td>Purchasing</td>
      <td>Kocaeli</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Engin Kızıl</td>
      <td>Sales</td>
      <td>Bozuyük</td>
    </tr>
  </tbody>
</table>

рони · #2 (**permalink**) 07.10.2015, 01:03

Cresis,
class="guide" для заголовков
class="category" для категорий

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style type='text/css'>
    body {
    font-family: Arial, Helvetica;
    font-size: 12px;
}
table {
    width: 500px;
}
tr {
    height: 20px;
}
.guide {
    text-decoration: underline;
    text-align: center;
}

.hot {
    border: 1px solid #f00;
    background-color: #FFD480;
    color: #000000;
}
.category  {
  background-color: #B0C4DE;
}
td {
  border: #0000FF 1px solid;
}

  </style>
<script>
$(function() {
    $("input#search").on("input", function() {
        var text = this.value.toLowerCase();
        $("tr:not('.guide, .category') td").removeClass("hot").each(function(i, obj) {
            if ($(obj).text().toLowerCase().indexOf(text) > -1 && text) $(obj).addClass("hot")
        });
        $("tr:not(.guide)").show().filter(function() {
            var ok = $(this).is('.category');
            return text && !$(".hot",ok ? $(this).nextUntil('.category'): this).length
        }).hide()
       var jobCount = $("tr").has('.hot').length;
       $('.counter').text(jobCount + ' результат(ов)');
    })
});
</script>


</head>
<body>
  <input id="search" type="text"></input>
  <span class="counter pull-right"></span>
<table>
    <tr class="guide">
        <td>First Name</td>
        <td>Last Name</td>
        <td>City</td>
        <td>State</td>
    </tr>
    <tr class="category" > <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 1</td> </tr>
    <tr>
        <td>Manix</td>
        <td>Bolton</td>
        <td>Merizo</td>
        <td>Michigan</td>
    </tr>
    <tr>
        <td>Azalia</td>
        <td>Gallegos</td>
        <td>Plainfield</td>
        <td>Michigan</td>
    </tr>
    <tr class="category" > <td colspan="4" style="text-align:center; text-decoration:underline;">Категория 2</td> </tr>
    <tr>
        <td>Michael</td>
        <td>Shaw</td>
        <td>Rawlins</td>
        <td>New Hampshire</td>
    </tr>
    <tr>
        <td>Matthew</td>
        <td>Parker</td>
        <td>Chino Hills</td>
        <td>Michigan</td>
    </tr>
</table>

</body>


</html>

Cresis · #3 (**permalink**) 07.10.2015, 12:31

Оо, это великолепно! То, что нужно!
Огромное спасибо за понимание и отличное решение.

А есть возможность прикрутить сюда счетчик и выдавать ошибку на подобии как в скрипте из шапки?

var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' результат(ов)');


if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
          });

рони · #4 (**permalink**) 07.10.2015, 12:53

Сообщение от Cresis

прикрутить сюда счетчик

смотрите код выше

Cresis · #5 (**permalink**) 07.10.2015, 13:57

Спасибо)

Cresis · #6 (**permalink**) 07.10.2015, 14:28

Извините, но можно еще чуть-чуть помощи...
Не могли бы Вы еще сделать так, что бы при совпадении с категорией, категория тоже выводилась?
Например: категория "Замена молнии", вводим в поле "Замена молнии" и выводится категория со всеми пунктами под ней?
Заранее спасибо!

рони · #7 (**permalink**) 07.10.2015, 14:51

Cresis,

Cresis · #8 (**permalink**) 07.10.2015, 21:51

Понял, спасибо еще раз)

Форум

Справочник

Discord чат

Курсы javascript