使用JQuery隐藏某些搜索结果
使用JQuery隐藏某些搜索结果
提问于 2022-07-07 20:40:50
我有一个基本的搜索栏，有大约25个选项要搜索，我需要做的是隐藏其中的两个选项对用户。最初，加载选项的模态如下所示：
但是，如果我在输入中写入和删除某些内容，就会发生这样的情况：
我需要对用户隐藏重复选项CÓDIGO和空白选项(就像第一个图像一样)，但是我在这样做时遇到了困难.
下面是用于执行搜索的JQuery代码：
$('#searchColumns').on('keyup', function () {
var search = $(this).val().toLowerCase();
$('#selectColumnsTable tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(search) > -1);
});
});为了以防万一，该模型的代码：(使用Alpine.js v2.8.2和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>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-08 00:12:31
我不知道livewire还是高寒，但jquery似乎在展示阿尔卑斯隐藏了什么。
看看这是否适用于您，我尝试创建一个类似的html结构，从隐藏的2行开始，在搜索其他行时跳过这2行：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72903980
复制相关文章
相似问题
腾讯云开发者
