How to automatically open the detail menu on search for buttons?-CodePudding

Description

Hi everyone,

Currently I have a search bar that is searching the button elements inside of the detail menu. I have to manually click/open the detail menu and then perform the search.

How do I make it so the detail menu automatically opens and closes on search?

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

<title>Fruits</title>

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">

<body>
    <div id="border">
        <div>
            <details id="search" >
                <summary id="summary">Fruits</summary>
                <button  id="apple">Apple</button>
                <button  id="orange">Orange</button>
                <button  id="banana">Banana</button>
            </details>
        </div>
    </div>
</body>

</html>

<script>
  const searchbar = document.getElementById('mySearch');
  searchbar.addEventListener('keyup', (event) => {
    const searchKey = event.target.value;
    const nodes = document.querySelectorAll('.finding-button');
    nodes.forEach(node => {
      node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
    })
  })
</script>

CodePudding user response：

Just add open attribute on your tag Like this.

function myFunction(){
  const searchbar = document.getElementById('mySearch');
  searchbar.addEventListener('keyup', (event) => {
    const searchKey = event.target.value;
    const nodes = document.querySelectorAll('.finding-button');
    nodes.forEach(node => {
      node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
    })
  })
}

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

<title>Fruits</title>

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">

<body>
    <div id="border">
        <div>
            <details id="search"  open>
                <summary id="summary">Fruits</summary>
                <button  id="apple">Apple</button>
                <button  id="orange">Orange</button>
                <button  id="banana">Banana</button>
            </details>
        </div>
    </div>
</body>

</html>

CodePudding user response：

On your keyup handler you can check if your details has the open attribute and add it in case it's not set

const searchbar = document.getElementById('mySearch');

searchbar.addEventListener('keyup', (event) => {
  const searchKey = event.target.value;

  const details = document.getElementById('search');

  if (!details.hasAttribute('open')) {
    details.setAttribute('open', true);
  }
  
  if(searchKey==''){
    details.removeAttribute('open');
  }
  const nodes = document.querySelectorAll('.finding-button');
  nodes.forEach(node => {
    node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
  })
})

<input type="text" id="mySearch" placeholder="Search.." title="Type in a category">

<body>
  <div id="border">
    <div>
      <details id="search" >
        <summary id="summary">Fruits</summary>
        <button  id="apple">Apple</button>
        <button  id="orange">Orange</button>
        <button  id="banana">Banana</button>
      </details>
    </div>
  </div>