你好伙計們請幫助我
我的下拉選單作業正常，但我也想過濾輸入欄位。
當我添加名字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>你們能幫幫我嗎，我會很高興的
提前致謝
uj5u.com熱心網友回復：
試試這個代碼：
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();
} }
uj5u.com熱心網友回復：
你也可以試試這個
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();
} }
uj5u.com熱心網友回復：
@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();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/392237.html
標籤：javascript php html 查询 WordPress的
上一篇：HTML無法識別CSS檔案