Как скрыть / показать дубликат элемента с помощью поискового фильтра? - PullRequest
0 голосов
/ 08 января 2020

У меня есть фильтр, который находит искомое значение.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input type="text" class="my-textbox" placeholder="filtering..." />
<table id="Table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<script>
$(".my-textbox").keyup(function() {
    var value = $(this).val().toUpperCase();
    var seen = {};


    $("#Table tr").each(function() {
        var content = $(this).find('td:eq(0)').text();

        if (content.toUpperCase().indexOf(value) == -1) {
            $(this).hide();     
        } else {
            $(this).show();

        }

        /* Remove duplicate */
        var txt = $(this).text();
        if (seen[txt])
            $(this).remove();
        else
            seen[txt] = true;

    });
});
</script>

Таблица содержит четыре элемента: 1 2 3 1. Если я напишу 1 в поиске, результат будет 1 и повторяющийся элемент (например, 4-й элемент) удаляется.

Как решить, что после каждой фильтрации повторяющийся элемент (например, 4-й элемент) будет снова виден?

Дело в том, что если я удаляю поисковый элемент из ввода, то показываю все элементы таблицы.

1 Ответ

1 голос
/ 08 января 2020

Посмотрите на этот фрагмент, идея состоит в том, чтобы сначала сохранить фактический результат в некоторой переменной, если в текстовом поле нет текста, тогда заполните результат фактическими данными.

var actualResult;
$(document).ready(function(){ 
     actualResult=$(".myResult").html(); 
});

$(".my-textbox").keyup(function() {
    var value = $(this).val().toUpperCase();
    var seen = {};

    if($('.my-textbox').val().length<=0)
    {    
         $(".myResult").html(actualResult); return; 
    }
        
    $("#Table tr").each(function() {
        var content = $(this).find('td:eq(0)').text();

        if (content.toUpperCase().indexOf(value) == -1) {
            $(this).hide();     
        } else {
            $(this).show();
        }       
        

        /* Remove duplicate */
        var txt = $(this).text();
        if (seen[txt])
            $(this).remove();
        else
            seen[txt] = true;
    });
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<input type="text" class="my-textbox" placeholder="filtering..." />
<div class='myResult'> 
<table id="Table">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
</table>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...