Make columns not searchable in jQuery search made with filter()

Question

I try to make a search functionality that will search in 3 column table with 1000+ rows but I want the search query to be searched only in the first column and not in the other 2 columns.

<div class="delivery-list">
<div class="bgr-black">
    <div class="row filters">
        <div class="search-filter">
            <form role="form">
                <div class="form-group">
                    <label class="float-label" for="search">Search</label>
                    <input type="text" class="form-control-search" id="search">
                </div>
            </form>
        </div>
    </div>
</div>

<table id="searchable-table" class="row regular-devices ">
    <tr>
        <th class="cat-bg euro-city">City</th>
        <th class="cat-bg euro-district">District</th>
        <th class="cat-bg euro-date">Deadline</th>

    </tr>

    <tr class="city-row">
        <td class="city-id searchable">Paris</td>
        <td class="district">France</td>
        <td class="delivery-euro">Monday and Sunday</td>
    </tr>

    <tr class="city-row">
        <td class="city-id searchable">Munich</td>
        <td class="district">Germany</td>
        <td class="delivery-euro">Only Mondays</td>
    </tr>

    <tr class="city-row">
        <td class="city-id searchable">London</td>
        <td class="district">UK</td>
        <td class="delivery-euro">Every workday</td>
    </tr>

    <tr class="city-row">
        <td class="city-id searchable">Gamburg</td>
        <td class="district">Germany</td>
        <td class="delivery-euro">Every day</td>
    </tr>

    <tr class="city-row">
        <td class="city-id searchable">Madrid</td>
        <td class="district">Spain</td>
        <td class="delivery-euro">Every workday</td>
    </tr>

    <tr class="city-row">
        <td class="city-id searchable">Lisboa</td>
        <td class="district">Portugal</td>
        <td class="delivery-euro">Every day</td>
    </tr>

    <tr class="city-row">
        <td class="city-id searchable">New York</td>
        <td class="district">USA</td>
        <td class="delivery-euro">Every workday</td>
    </tr>

    </tabe>

            jQuery("#search").on("keyup", function () {
                var value = jQuery(this).val().toLowerCase();
                jQuery("#searchable-table .city-row").filter(function () {
                    jQuery(this).toggle(jQuery(this).text().toLowerCase().indexOf(
                        value) > -1)
                });
            });

Currently, the string that I enter in the search field is searched in the all 3 columns and this may cause confusion.

Please help me make 2nd and 3rd column not searchable

Answer 1

You may try to filter on td.searchable and hide/show the parent. Something like that

jQuery("#search").on("keyup", function() {
  var value = jQuery(this).val().toLowerCase();
  jQuery(".searchable").filter(function() {
    jQuery(this).parent().toggle(jQuery(this).text().toLowerCase().indexOf(
      value) > -1)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delivery-list">
  <div class="bgr-black">
    <div class="row filters">
      <div class="search-filter">
        <form role="form">
          <div class="form-group">
            <label class="float-label" for="search">Search</label>
            <input type="text" class="form-control-search" id="search">
          </div>
        </form>
      </div>
    </div>
  </div>
  <table id="searchable-table" class="row regular-devices ">
    <tr>
      <th class="cat-bg euro-city">City</th>
      <th class="cat-bg euro-district">District</th>
      <th class="cat-bg euro-date">Deadline</th>

    </tr>

    <tr class="city-row">
      <td class="city-id searchable">Paris</td>
      <td class="district">France</td>
      <td class="delivery-euro">Monday and Sunday</td>
    </tr>

    <tr class="city-row">
      <td class="city-id searchable">Munich</td>
      <td class="district">Germany</td>
      <td class="delivery-euro">Only Mondays</td>
    </tr>

    <tr class="city-row">
      <td class="city-id searchable">London</td>
      <td class="district">UK</td>
      <td class="delivery-euro">Every workday</td>
    </tr>

    <tr class="city-row">
      <td class="city-id searchable">Gamburg</td>
      <td class="district">Germany</td>
      <td class="delivery-euro">Every day</td>
    </tr>

    <tr class="city-row">
      <td class="city-id searchable">Madrid</td>
      <td class="district">Spain</td>
      <td class="delivery-euro">Every workday</td>
    </tr>

    <tr class="city-row">
      <td class="city-id searchable">Lisboa</td>
      <td class="district">Portugal</td>
      <td class="delivery-euro">Every day</td>
    </tr>

    <tr class="city-row">
      <td class="city-id searchable">New York</td>
      <td class="district">USA</td>
      <td class="delivery-euro">Every workday</td>
    </tr>

    </tabe>