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

Question

大家好，请帮帮我

我的Dropdown运行良好，但我也想过滤输入字段。

当我添加名称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();
}
}