Mon. Sep 25th, 2023

[ANSWERED] html – Javascript searchfunction

By

Nov 20, 2022 html, javascript, loops

Solution 1 :

The easiest thing to do is switch between block and none based on whether the search term is found in the specified element.

Start typing “bob” or “john” in the example below to see the effect.

function searchFunction() {
  const search = document.getElementById("myinput").value;
  const names = document.getElementsByClassName("names");
  //console.log(search)
  for (var i = 0; i < names.length; i++) {
     names[i].parentElement.style.display =  
        (names[i].innerHTML.toUpperCase().includes(search.toUpperCase()) 
            ? "block"
            : "none");
  }

}

<form class="search">
     <input class="bar" type="search" name="search" placeholder="Nach Mitarbeiter suchen"autocomplete="off" id="myinput" oninput="searchFunction()">
     <div class='gridRow'>
         <p class='rowElements names'>Bob</p>
         <p class='rowElements beer'>Beer1</p>
         <p class='invisibleBullshit'>[email protected]</p>
         <input type='number' min='0' class='rowElements inputSize' placeholder='0' name='beerSub-bob'>
         <button class='rowElements btn btn-primary btn-sm inputSize' onclick='payBeer("bob","[email protected]")'>
             Bezahlen
          </button>
     </div>
     <div class='gridRow'>
         <p class='rowElements names'>John</p>
         <p class='rowElements beer'>Beer2</p>
         <p class='invisibleBullshit'>[email protected]</p>
         <input type='number' min='0' class='rowElements inputSize' placeholder='0' name='beerSub-john'>
         <button class='rowElements btn btn-primary btn-sm inputSize' onclick='payBeer("john","[email protected]")'>
             Bezahlen
          </button>
     </div>
</form>

Problem :

I got a problem here. The search is working almost. But when I am deleting something it doesnt appear again. (tried something like else {names[i].parentElement.style.display = "block"}). This didnt work.
And maybe someone could tell me what to do if someone hits enter and everthing gets resetted. Thanks to every answer.

function searchFunction() {
  const search = document.getElementById("myinput").value;
  const names = document.getElementsByClassName("names");
  console.log(search)
  for (var i = 0; i < names.length; i++) {
    if (names[i].innerHTML.toUpperCase().includes(search.toUpperCase()) == false) {
      names[i].parentElement.style.display = "none"
    }
  }

}

<form class="search">
    <input class="bar" type="search" name="search" placeholder="Nach Mitarbeiter suchen" autocomplete="off" id="myinput" oninput="searchFunction()"> echo "
    <div class='gridRow'>
        <p class='rowElements names'>" . $user . "</p>

        <p class='rowElements beer'>" . $beer . "</p>

        <p class='invisibleBullshit'>" . $email . "</p>

        <input type='number' min='0' class='rowElements inputSize' placeholder='0' name='beerSub-"
                    . $user ."'>

        <button class='rowElements btn btn-primary btn-sm inputSize' onclick='payBeer(".' "'.$user.'" '.",".' "'.$email.'" '.")'>
            Bezahlen
        </button>
    </div>
</form>

Comments

Comment posted by Lain

Nothing reappears because you only hide stuff using

Comment posted by Maximilian Rabe

Thank thought is was wrong when i tried it because I got a grid for the rows. And i needed to set in to display “flex” or “none”. But thanks for your help.

Comment posted by Lain

Setting back the display to an empty string is usually better. Like this you overwrite any css definition the user could have set somewhere.

Comment posted by Jamiec

@Lain I totally get (and agree with) your point, but setting it back to blank would

Comment posted by Lain

It would not overwrite css definitions atleast, merely inline styles.

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022