在jQuery中单击按钮并按特定字符过滤数据

Question

大家好，请帮帮我

我的下拉菜单工作正常，但我也想过滤输入字段。

当我添加名称 Jill 时，我会得到数据。

如果我过滤全名，那么我会得到数据，但我希望我输入一些名字，然后我会得到过滤数据，例如：jill、hel、walker 等。

    $(document).ready(function () {
        $(".sbtns").on("click", function () {
            var name = $('#snme').val();
            //$('.item div:contains('+name+')').addClass('color');
            var coundivy = $('#ddlCoundivy').find("option:selected").val();
            var age = $('#ddlAge').find("option:selected").val();
            SearchData(name, coundivy, age)
        });
    });
    function SearchData(name, coundivy, age) {
        if (name.toUpperCase() == '' && coundivy.toUpperCase() == 'ALL' && age.toUpperCase() == 'ALL') {
            $('#table11 .item').show();
        } else {
            $('#table11 .item:has(div)').each(function () {
                var rowName = $.trim($(this).find('div:eq(0)').text());
                //var findname = $('div:contains('+rowName+')').addClass('color');
                var rowCoundivy = $.trim($(this).find('div:eq(1)').text());
                var rowAge = $.trim($(this).find('div:eq(2)').text());
                if (name.toUpperCase() !='' && coundivy.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {
                    if (rowCoundivy.toUpperCase() == coundivy.toUpperCase() && rowAge == age && rowName == name) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else if ($(this).find('div:eq(1)').text() != '' || $(this).find('div:eq(1)').text() != '' || $(this).find('div:eq(1)').text() != '') {
                  if (name != '') {
                        if (rowName.toUpperCase() == name.toUpperCase()) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                   if (coundivy != 'all') {
                        if (rowCoundivy.toUpperCase() == coundivy.toUpperCase()) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (age != 'all') {
                        if (rowAge == age) {
                            $(this).show();
                        }
                        else {
                            $(this).hide();
                        }
                    }
                }
 
            });
        }
    }

<input id="snme" name="sa_snme" value="" placeholder="Name?" type="text" class="s_snme" autocomplete="off">
<select class="cl_coundivy" id="ddlCoundivy">
    <option value="all">Select Class </option>
    <option value="India">india</option>
    <option value="usa">usa</option>
    <option value="uk">uk</option>
</select>
<select class="cl_age" id="ddlAge">
    <option value="all">Select Class </option>
    <option value="50">50</option>
    <option value="60">60</option>
    <option value="80">80</option>
</select>
<input type="button" value="" class="sbtns" name="search_submit" data-post="39" value="click">
<div style="width: 100%" id="table11" border="1">
    <div class="tr">
        <div>name</div>
        <div>coundivy</div>
        <div>Age</div>
    </div>
     <div class="item">
        <div>Jill name</div>
        <div>USA</div>
        <div>50</div>
    </div>
     <div class="item">
        <div>Eve hel</div>
        <div>UK</div>
        <div>50</div>
    </div>
     <div class="item">
        <div>John martin</div>
        <div>INDIA</div>
        <div>80</div>
    </div>
     <div class="item">
        <div>sam karan</div>
        <div>AUSdivALIA</div>
        <div>80</div>
    </div>
     <div class="item">
        <div>joe khan</div>
        <div>INDIA</div>
        <div>60</div>
    </div>
     <div class="item">
        <div>alan walker</div>
        <div>USA</div>
        <div>60</div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

你们能帮帮我，我会很高兴的

提前致谢

Answer 1

试试这个代码：

if (rowName.toLowerCase().search(name.toLowerCase()) != -1) {
    $(this).show();
   } else {
    $(this).hide();
}

其他条件

if (name.toUpperCase() !='' && coundivy.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {
  if (rowCoundivy.toUpperCase() == coundivy.toUpperCase() && rowAge == age && rowName.toLowerCase().search(name.toLowerCase()) != -1) {
     $(this).show();
  } else {
   $(this).hide();
  } }

Answer 2

你也可以试试这个

if (name.toUpperCase() !='' && coundivy.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {
  if (rowCoundivy.toUpperCase() == coundivy.toUpperCase() && rowAge == age && rowName.toLowerCase().includes(name.toLowerCase())) {
     $(this).show();
  } else {
   $(this).hide();
  } }

Answer 3

@dk-thakur，你可以用下面的代码替换你的 SearchData() 函数。它适用于所有条件

     function SearchData(name, coundivy, age) {
        if (
          name.toUpperCase() == "" &&
          coundivy.toUpperCase() == "ALL" &&
          age.toUpperCase() == "ALL"
        ) {
          $("#table11 .item").show();
        } else {
          $("#table11 .item:has(div)").each(function () {
            var rowName = $.trim($(this).find("div:eq(0)").text());
            var rowCoundivy = $.trim($(this).find("div:eq(1)").text());
            var rowAge = $.trim($(this).find("div:eq(2)").text());

            var condition = false;
            if (name != "") {
              var condition = rowName
                .toLowerCase()
                .includes(name.toLowerCase());
              if (coundivy != "all") {
                condition =
                  condition &&
                  rowCoundivy.toUpperCase() == coundivy.toUpperCase();
              }
              if (age != "all") {
                condition = condition && rowAge == age;
              }
            } else {
              if (coundivy != "all") {
                var condition =
                  rowCoundivy.toUpperCase() == coundivy.toUpperCase();
                if (age != "all") {
                  condition = condition && rowAge == age;
                }
              } else {
                if (age != "all") {
                  var condition = rowAge == age;
                }
              }
            }

            if (condition) {
              $(this).show();
            } else {
              $(this).hide();
            }
          });
          if ($("#table11").find("div.item:visible").length == 0) {
            $("#table11").append("<div id='no_data'>No Data Found!</div>");
          } else {
            $("#table11").find("div#no_data:visible").remove();
          }
        }