Hide certain search results using JQuery

Question

I have a basic search bar with about 25 options to be searched, what I need to do is hide 2 of those options from the user. Initially, the modal with the options loads like this:

But if i write and delete something in the input this is what happens:

I need to hide the repeated option CÓDIGO and the blank one from the user, (just like the first image) but I'm having trouble doing so...

Here is the JQuery code used to perform the search:

 $('#searchColumns').on('keyup', function () {
    var search = $(this).val().toLowerCase();

    $('#selectColumnsTable tr').filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
    });
 });

And just in case, the code for the modal: (using Alpine.js v2.8.2 and laravel-livewire)

<div x-data="{
        data:columns,
        selectedColumns: ['sap_id'],
    }" 
    wire:ignore class="modal fade" id="selectColumnsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Selecionar Colunas</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <p class="mx-10 mt-4">Selecione até 9 colunas para exibir...</p>
                <div class="text-center mx-10">
                    <div class="input-icon">
                        <input type="text" class="form-control" placeholder="Nome da coluna..." id="searchColumns">
                        <span>
                            <i class="flaticon2-search-1 text-muted"></i>
                        </span>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="mt-6 text-center">
                        <table id="selectColumnsTable" class="table table-hover gy-5">
                            <thead>
                                <th class="text-left">
                                    Coluna
                                </th>
                                <th class="text-left">
                                    <i class="la la-eye"></i>
                                </th>
                            <thead>
                            <tbody>
                                <tr>
                                    <td class="text-left ml-4"> 
                                        <span x-html="columns[1].title"></span> 
                                    </td>
                                    <td class="text-left">
                                        <input 
                                            x-model="selectedColumns"
                                            class="sapId" 
                                            id="sapId"
                                            type="checkbox"
                                            value="sap_id" 
                                            disabled 
                                            checked
                                        >
                                    </td>
                                </tr> 
                                <template x-for="(column, index) in data" :key="index">                          
                                    <tr x-show="column.field != 'id' && column.field != 'sap_id' &&column.title != '' && column.title != 'CÓDIGO'">
                                        <td class="text-left ml-4"> 
                                            <span x-html="column.title"></span> 
                                        </td>
                                        <td class="text-left">
                                            <input 
                                                x-model="selectedColumns" 
                                                id="selectColumns" 
                                                class="selectColumns" 
                                                type="checkbox" 
                                                :value=column.field
                                            >
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-around">
                    <button @click="displaySelected(selectedColumns)" type="button" class="btn btn-primary col-5" data-target="click">Exibir selecionadas</button>
                    <button type="button" class="btn btn-danger col-5" data-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

I don't know livewire or alpine, but it seems that jquery is showing what alpine hid.

See if this works for you, I tried to make a similar html structure, with the 2 lines starting hidden, and skip these 2 lines when searching the others:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>

  <input type="text" id="searchColumns" />

  <table id="selectColumnsTable">
    <tr>
      <td><span>CÓDIGO</span></td>
      <td><input type="checkbox" checked="true" disabled /></td>
    </tr>
    <tr class="hidden">
      <td><span>CÓDIGO</span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr class="hidden">
      <td><span></span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><span>RAZÃO SOCIAL</span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><span>INT VISITA</span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><span>INT COMPRA</span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><span>ATENDIMENTO</span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><span>SAC</span></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><span>INT COMPRA</span></td>
      <td><input type="checkbox" /></td>
    </tr>
  </table>

  <script>
    $("#searchColumns").on("keyup", function () {
      var search = $(this).val().toLowerCase();

      $("#selectColumnsTable tr").filter(function () {
        let linhaCodigo = $(this).find("span").html() === "CÓDIGO";
        let linhaId = $(this).find("span").html() === "";

        if (!linhaCodigo && !linhaId)
          $(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
      });
    });
  </script>
</html>