I have a searchbar, 2 divs that will display the id and brand name, and 2 checkboxes.
I want to retrieve brand data according to search, if I search for "Nike" then the brand-id and brand-name divs will display the brand name and id based on the checkbox below. And the checkbox below it is ticked. I've coded like below, but when I debug to get the brand name it merges "nikebrand", so when I do a conditioning it doesn't work
$('.search-brand').on('keyup keypress',function(){
const brandFilterEl = $(".filter-item .filter-label")
brandFilterEl.each(function(){
const brandValues = brandFilterEl.text().toLocaleLowerCase()
console.log(brandValues)
if($('.search-brand').val() === brandValues){
const valFilterBrand = brandFilterEl.siblings().attr('value')
console.log(valFilterBrand)
$('.brand-id').text(valFilterBrand)
$('.brand-name').text(brandValues)
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="search-brand" style="margin-bottom:20px;">
<div class="brand-id"></div>
<div class="brand-name"></div>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
<input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span>
</li>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
<input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span>
</li>I think that when you iterate over brandFilterEl.each you forget to check the current value of brandFilterEl, you can do it using this. For convenience I created an alias for $(this) and named it $self.
$('.search-brand').on('keyup keypress', function() {
const brandFilterEl = $(".filter-item .filter-label")
brandFilterEl.each(function() {
var $self = $(this); // this is the main change
const brandValues = $self.text().toLocaleLowerCase()
if ($('.search-brand').val() === brandValues) {
const valFilterBrand = $self.siblings().attr('value')
console.log(valFilterBrand)
$('.brand-id').text(valFilterBrand)
$('.brand-name').text(brandValues)
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="search-brand" style="margin-bottom:20px;">
<div class="brand-id"></div>
<div class="brand-name"></div>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
<input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span>
</li>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
<input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span>
</li>You can try out this code, it's working the same as your per expectations.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
$('.search-brand').on('keyup keypress',function(){
const brandFilterEl = $(".filter-item .filter-label");
brandFilterEl.each(function(i){
$(this).siblings('input[name="brandIds"]').prop( "checked", false );
const brandValues = $(this).text().toLocaleLowerCase();
var search_val = $('.search-brand').val().toLocaleLowerCase();
if(search_val == brandValues){
const valFilterBrand = $(this).siblings('input[name="brandIds"]').val();
$('.brand-id').text(valFilterBrand);
$('.brand-name').text(brandValues);
$(this).siblings('input[name="brandIds"]').prop( "checked", true );
}
});
});
});
</script>
</head>
<body>
<input type="text" class="search-brand" style="margin-bottom:20px;">
<div class="brand-id"></div>
<div class="brand-name"></div>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
<input type="checkbox" name="brandIds" value="3" style="margin-right: 5px"> <span class="filter-label">Nike</span>
</li>
<li class="filter-item" style="padding-left: 20px; font-size: 12px; padding-bottom: 0; border: none;">
<input type="checkbox" name="brandIds" value="2" style="margin-right: 5px"> <span class="filter-label">Adidas</span>
</li>
</body>
</html>