Блог

Главная - Вопросы по программированию - Я хочу улучшить этот код JavaScript, который фильтрует список флажков по «value=».

Я хочу улучшить этот код JavaScript, который фильтрует список флажков по «value=».

#javascript #jquery #asp.net-mvc #asp.net-core #checkbox

#javascript #jquery #asp.net-mvc #asp.net-core #флажок

Вопрос:

У меня есть код, похожий на этот, с точки зрения моего Asp.Net Основное приложение:

 @model Color.Models.AM

<div class="container">
    <div class="card level-3">
        <h4>AM</h4>
        <hr />
        <div class="row">
            <div class="col-md-4">
                <form asp-action="Create">
                    <div>
                        <input id="txt" type="text" value="" />
                        <input id="btn" type="button" value="Search" />
                    </div>
                    <div class="form-group">
                        <input id="cboAll" type="checkbox" value="CheckAll / unCheck" />
                        ALL<br />
                        <div class="wrapper">
                            @foreach (var cm in Model)
                            {
                                <div><input id=@cm.Name type="checkbox" name="selectedCdos" value=@cm.Id class="tipoo" />@cm.Name Roo: @cm.Roo</div>
                            }
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Create" class="btn btn-primary" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .wrapper {
        width: 500px;
        height: 200px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .card {
        background-color: #fff;
        border-radius: 10px;
        margin: 10% auto;
        position: relative;
        padding: 34px;
        color: #444;
        cursor: pointer;
        overflow-x: auto;
    }
        .card.level-3:hover:before {
            box-shadow: 0 0 80px #999999;
        }
</style>

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

Код модели выглядит примерно так:

 using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace Color.Models
{
    public class AM
    {
        [key]
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Required]
        public int Roo { get; set; }
    }
}

И, наконец, вот фотография того, как выглядит вид:
изображение вида

Все это работает совершенно нормально и без проблем, флажки, которые я проверяю, отправляются контроллеру, который выполняет действия с выбранными значениями.

С чем я хочу получить помощь, и у меня есть проблемы, однако, это связано со следующим кодом JavaScript, который находится в конце представления:

 <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
    $(function () {
        $("#cboAll").click(function () {
            if ($(this).is(":checked")) {
                $(".tipoo").prop('checked', true);
            }
            else {
                $(".tipoo").prop('checked', false);
            }
        });
        $("input[id*=btn]").click(function () {
            var searchvalue = $("input[id*=txt]").val();
            if (searchvalue != "") {
                $(".tipoo").each(function () {
                    if ($(this).val() == searchvalue) {
                        $(this).show();
                    }
                    else {
                        $(this).hide();
                        $(this.nextSibling).wrap('<span style="display:none"></style>');
                    }
                })
            }
            else {
                $("#cboAll,.tipoo").show();
            }
        })
    })
</script>

Этот код генерирует флажок ALL, который выбирает все значения, и кнопку поиска, которая позволяет фильтровать их, но у него есть следующие проблемы (потому что в основном код javascript работает не так, как мне хотелось бы).

1) Это фильтрует флажки по его значению, когда я хотел бы, чтобы он фильтровал его по идентификатору или другой метке из флажка (поскольку то, что у меня есть в «value =», — это то, что мне нужно отправить контроллеру, в то время как «Id» может быть текстом, отображаемым в представлении).

Теперь предположим, что я меняю «value=@cm.Id » чтобы «value=@cm.Name » чтобы проверить, как работает фильтр поиска, в этом случае возникают следующие проблемы:

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

Изображение рабочего фильтра (кнопка поиска) и показывает, как он находит мне флажок со значением «Паблона»

Рис., который показывает, что если я ищу «Pabl», он ничего не находит.

Если, например, написать «Mateo» и нажать кнопку поиска; Ок, в представлении отображается только флажок для Mateo, то же самое, если я напишу Pablo, но это не находит ни одного из двух, если я напишу, например, «Mat» или «Pabl»; Когда я хотел бы, чтобы, когдаЯ ищу «Pabl», он показывает мне все флажки, которые содержат что-то написанное с последовательностью символов «Pabl», единственным исключением из этого является то, что скрипт учитывает пробелы, поэтому, если я ищу Jan, он находит меня «Jan Dos», потому что между ними есть пробел.слова «Jan» и «Dos». Но, как я уже сказал, я бы хотел, чтобы это работало, чтобы показать мне все флажки, которые содержат последовательность «Pabl», когда я ищу «Pabl».

3) Кнопка «ВСЕ» всегда выбирает все.

Способ, которым код JavaScript работает сейчас, заключается в том, что если я фильтрую данные и нажимаю ВСЕ, все флажки будут установлены, даже те, которые были скрыты, когда я хотел бы, чтобы при нажатии на ВСЕ и фильтрации данных выбирались только все флажки, которые прошли через фильтр(не скрытые).

4) Текст флажка исчезает, если я нажимаю кнопку поиска во второй раз.

Рис., показывающий эту проблему, потому что код изменяет значение div на скрытое, а затем не возвращает его к тому, как это было раньше.

Может ли кто-нибудь действительно помочь мне решить эти 4 проблемы и улучшить мой код Javascript?

Я искал альтернативные коды Javascript в Интернете для всего этого, но ни один из них не включает все функции, которые я упоминаю, и что мне нравится в простоте моего исходного кода, так это то, что он позволяет мне легко управлять данными, поскольку мне действительно легко получить значение флажкав контроллере; Если код Div такой.

Ответ №1:

Я предлагаю вам сравнить ТЕКСТ, отображаемый в стороне от каждого флажка… Поскольку это то, что действительно нужно искать. Не используйте id для этого! An id должен быть уникальным и не может содержать пробел. Так что иметь id=@cm.Name это очень неправильно.

Итак, в .each() цикле вы будете сравнивать searchvalue (в нижнем регистре) с «родительским текстом div» (также в нижнем регистре). Кроме того, чтобы разрешить частичные совпадения, вы будете проверять наличие the indexOf() searchvalue в этом тексте.

О том, чтобы не проверять скрытые флажки, :visible селектор полезен.

Смотрите ниже:

 // Feaking your @foreach loop
let Model = [
  { Name: "12 Pablo Usuario", Id: 1, Roo: 333 },
  { Name: "A111", Id: 2, Roo: 12345678 },
  { Name: "AA", Id: 3, Roo: 123456 },
  { Name: "AAAAA", Id: 4, Roo: 12345 },
  { Name: "DF", Id: 5, Roo: 1251 },
  { Name: "DFD", Id: 6, Roo: 1246 },
  { Name: "DFD", Id: 7, Roo: 1250 },
  { Name: "DFD", Id: 8, Roo: 1249 }
];

Model.forEach(function (cm, index) {
  $(".wrapper").append(
    $(
      `<div><input id="check_${cm.Id}" type="checkbox" name="selectedCdos" value="${cm.Id}" class="tipoo" /> ${cm.Name} Roo: ${cm.Roo}</div>`
    )
  );
});
// END fake...

$(function () {
  $("#cboAll").click(function () {
    if ($(this).is(":checked")) {
      $(".tipoo:visible").prop("checked", true);  // :visible is to ensure the hidden checkboxes wont be checked.
    } else {
      $(".tipoo").prop("checked", false);
    }
  });
  $("input[id*=btn]").click(function () {
    var searchvalue = $("input[id*=txt]").val().toLowerCase(); // Have the search value all lowercase
    if (searchvalue != "") {
      
      // Script change is here
      $(".tipoo").each(function () {
        let parentDiv = $(this).parent("div")
        parentDiv.toggle((parentDiv.text().toLowerCase().indexOf(searchvalue)>-1))
      });
      
      // Unchecking the hidden checkboxes
      $(".tipoo:hidden").prop("checked", false);
      
    } else {
      $("#cboAll,.tipoo").parent("div").show();
    }
  });
}); 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="card level-3">
    <h4>AM</h4>
    <hr />
    <div class="row">
      <div class="col-md-4">
        <form asp-action="Create">
          <div>
            <input id="txt" type="text" value="" />
            <input id="btn" type="button" value="Search" />
          </div>
          <div class="form-group">
            <input id="cboAll" type="checkbox" value="CheckAll / unCheck" /> ALL
            <br />
            <div class="wrapper">
              <!-- Your @foreach loop is feaked by JS below -->
            </div>
          </div>
          <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  .wrapper {
    width: 500px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .card {
    background-color: #fff;
    border-radius: 10px;
    margin: 10% auto;
    position: relative;
    padding: 34px;
    color: #444;
    cursor: pointer;
    overflow-x: auto;
  }
  
  .card.level-3:hover:before {
    box-shadow: 0 0 80px #999999;
  }
</style>

CodePen

Комментарии:

1. Большое вам спасибо, это было именно то, что мне было нужно, вы спасли мне жизнь этим!!! Я могу придумать решение проблемы значения / идентификатора, так что не беспокойтесь об этой части!!

2. Отлично! Но во всех случаях НЕ используйте id для переноса значений… Взгляните на атрибут data и jQuery .data() может быть … 😉

3. Случайно, ты там? Я знаю, что прошло некоторое время, но недавно я понял, что в финальном скрипте есть небольшая ошибка, в то время как все остальное работает нормально. Ошибка заключается в том, что, если вы ищете что-то для фильтрации данных, а затем устанавливаете флажок, а затем пишете что-то еще в поле ввода для повторного поиска чего-либо, флажок, который вы ранее установили, будет снят, чего не произойдет, если вы нажмете поиск, когда поле заполнено.пустой, чтобы снова открыть все флажки. Может быть, вы могли бы снова помочь, поскольку это лишь незначительное исправление (=

4. Я добровольно снял все скрытые флажки с $(".tipoo:hidden").prop("checked", false); помощью .. Просто прокомментируйте это, если вы хотите сохранить отмеченные флажки, даже если они скрыты из-за поиска.

5. Да! Я хочу сохранить отмеченные флажки, даже если они скрыты из-за поиска. Единственное, что должно игнорировать скрытые поля, — это флажок ALL.