JQuery/HTML - Reset Buttons on Search Box Click

Question

I'm pretty rookie at this, so, apologies. I've flattened my styling, so it's easier to paste in here, but the principles should still work.

I've got a list of items, a search field (which works) and filter buttons (which work). What I need is for the filter buttons to reset to 'All' is active, when the search field is clicked, as the search field searches all items.

Could anyone advise...? I've tried all sorts of different methods but can't get the damn thing going.

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.0.0b1.js"></script>

  <!-- SEARCH LIST SCRIPT-->
  <script>
    function searchTable() {
      // Declare variables
      var input, filter, ul, li, a, i, txtValue;
      input = document.getElementById('imtListInput');
      filter = input.value.toUpperCase();
      ul = document.getElementById("imtList");
      li = ul.getElementsByTagName('li');

      // Loop through all list items, and hide those who don't match the search query
      for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }
  </script>

  <!-- TABLE SHOW HIDE SCRIPT-->
  <script>
    function show(champ) {
      $('ul li').hide()
      $('ul li:has(a.' + champ + ')').show()
    }
  </script>

  <!-- SEARCH CLICK SCRIPT-->
  <script>
    function searchClick() {
      $('ul li').show()

      //RESET SELECTED BUTTON TO 'ALL'

    }
  </script>
</head>

<body>
  <div style="padding-bottom:10px;" class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary btn-lg active">
                            <input type="radio" name="options" id="option1" autocomplete="off" checked onclick="$('ul li').show()"> All
                        </label>
    <label class="btn btn-primary btn-lg">
                            <input type="radio" name="options" id="option2" autocomplete="off" onclick="show(&quot;Section1&quot;)"> Section1
                        </label>
    <label class="btn btn-primary btn-lg">
                            <input type="radio" name="options" id="option3" autocomplete="off" onclick="show(&quot;Section2&quot;)"> Section2
                        </label>
  </div>

  <input type="text" id="imtListInput" onkeyup="searchTable()" onclick="searchClick()" placeholder="Search...">

  <ul id="imtList">
    <li><a class="Section1" href="#">File 1</a></li>
    <li><a class="Section1" href="#">File 2</a></li>
    <li><a class="Section1" href="#">File 3</a></li>
    <li><a class="Section1" href="#">File 4</a></li>
    <li><a class="Section1" href="#">File 5</a></li>
    <li><a class="Section2" href="#">File 6</a></li>
    <li><a class="Section2" href="#">File 7</a></li>
  </ul>
</body>

</html>

Does this answer your question? [How to check a radio button with jQuery?](https://stackoverflow.com/questions/5665915/how-to-check-a-radio-button-with-jquery) — Molham Al Nasr, Jan 15 '21 at 09:10

CBroe · Accepted Answer · 2021-01-15T09:19:18.960

1

Select that radio button, and set its checked property to true:

  <script>
    function searchClick() {
      $('ul li').show()

      //RESET SELECTED BUTTON TO 'ALL'
      $('#option1').prop('checked', true);
      $('.btn-group-toggle label.active').removeClass('active');
      $('.btn-group-toggle label').first().addClass('active');

    }
  </script>

(Edit: Added reset of the active class on the labels as well.)

edited Jan 15 '21 at 09:19

answered Jan 15 '21 at 08:57

CBroe

91,630
14
92
150

Seems to work in the example above, but when I add it back to my full styled document it doesn't highlight the correct button... – GlenRitchie Jan 15 '21 at 09:07
`
All
` – GlenRitchie Jan 15 '21 at 09:08
It is not clear from your question, what kind of custom formatting you are applying here. I’m guessing it has something to do with the `active` class on the label? Then you need to remove that from whichever label currently has it, and set it for the first one again. – CBroe Jan 15 '21 at 09:16
$("#option1").trigger('click'); will work, however it then loses focus from the field... – GlenRitchie Jan 15 '21 at 09:18
I'm using Boostrap for the CSS. So the would-be radio buttons are actually buttons, they then switch between .btn-primary and .btn-primary:focus, .btn-primary.focus I suppose? – GlenRitchie Jan 15 '21 at 09:27
$( "#option1" ).focus(); works too - however again, it draws focus away permanently... – GlenRitchie Jan 15 '21 at 09:32
Have you checked my edit of the answer? Manually re-setting the active class should do the trick. – CBroe Jan 15 '21 at 09:33
My sincerest apologies, I hadn't. That's fixed it. Perfect. Thank you. – GlenRitchie Jan 15 '21 at 09:36

score 1 · Answer 2 · answered Jan 15 '21 at 09:43

At searchTable function you can add your radio elements by the querySelectorAll() and loop with for each to get the value of checked for each of them, so when you use search input, all radioButtons will be assigned to false, while search input is empty so All RadioButton will be checked to true since all list items appeared

function searchTable() {
                // Declare variables
                var input, filter, ul, li, a, i, txtValue, r;
                input = document.getElementById('imtListInput');
                filter = input.value.toUpperCase();
                ul = document.getElementById("imtList");
                li = ul.getElementsByTagName('li');
                
                r = document.querySelectorAll('input[type="radio"]');
                r.forEach(elem => {
                    elem.checked = false
                });
    
                // Loop through all list items, and hide those who don't match the search query
                for (i = 0; i < li.length; i++) {
                    a = li[i].getElementsByTagName("a")[0];
                    txtValue = a.textContent || a.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        li[i].style.display = "";
                    } else {
                        li[i].style.display = "none";
                    }
    
                    if (input.value === '') {
                        r[0].checked = true
                    }
                }
            }

JQuery/HTML - Reset Buttons on Search Box Click

2 Answers2