How to retrieve the respective value from the checkbox to display in the div based on search text?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>