Поиск по таблице по названию

197

19 января 2019, 00:20

На странице есть таблица с валютами, вот код

<div class="trading__market-table">
                                    <div class="trading__market-table_vkl">
                                        <div class="trading__market-table-row" id="moneta1" name="moneta1" onclick = 'ChangeCoinProdBuySell("moneta1");'>
                                            <div class="trading__market-table-wrap">
                                                <div class="trading__market-table-circle trading__market-table-circle--green" name="Point_moneta1" onclick='ChangeColorGreenPoint("Point_moneta1");'></div> <!-- green -->
                                                <div class="trading__market-table-coin">moneta1</div>
                                            </div>
                                            <div class="trading__market-table-price">0.068<span>67804</span></div>
                                            <div class="trading__market-table-volume">4644.65</div>
                                            <div class="trading__market-table-change">+2.5%</div>
                                        </div>
</div>

Также есть поле для поиска

<div class="tradigng__market-search">
                                    <div class="trading__h">Markets</div>
                                    <input type="text">
                                </div>

Как реализовать поиск в таблице по названию монеты(по классу trading__market-table-coin)? Т.е если я ввожу moneta1, он должен оставить мне в таблице только эту монету.

Answer 1

var $Input = $('#input-search'); 
var $Resuts = $('#search'); 
$Input.on('keyup click input change', function() { 
  var value = this.value; 
  if (value.length > 0) { 
    $Resuts.find('.row').show().filter(function() { 
      return $(this).find('.name').text().toLowerCase().indexOf(value.toLowerCase()) == -1; 
    }).hide(); 
  } else { 
    $Resuts.find('div').show(); 
  } 
});

.row div { 
  display: inline-block; 
  width: 30%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id="input-search" type="text" placeholder="Поиск..." /><br/> 
<div id="search"> 
  <div class="row"> 
    <div class="name">Monet1</div> 
    <div>text1</div> 
    <div>text11</div> 
  </div> 
  <div class="row"> 
    <div class="name">Monet2</div> 
    <div>text2</div> 
    <div>text22</div> 
  </div> 
  <div class="row"> 
    <div class="name">Monet3</div> 
    <div>text3</div> 
    <div>text33</div> 
  </div> 
</div>