Hello Guys plz help me
My Dropdown is working fine but I want to filter the input field also.
As I add the Name Jill then I get the data.
If I filter full name then I get data but I want me to enter some name then I get filter data like: jill, hel, walker etc.
$(document).ready(function () {
$(".s_search_btns").on("click", function () {
var name = $('#sa_beruf_39').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="sa_beruf_39" name="sa_beruf" value="" placeholder="Beruf?" type="text" class="sa_beruf" 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="s_search_btns test" 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>Can you guys help me i will be very happy
Thanks in advance
>Solution :
try this code :
if (rowName.toLowerCase().search(name.toLowerCase()) != -1) {
$(this).show();
} else {
$(this).hide();
}
other conditions
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();
} }