Laravel search bar

问题

I'm trying to build a search bar for a project, the one that worked "the most" was the one from w3 I'm not trying to make one whhere youcan press enter, but just one that filters on the words, without connecting to my database.

Here is my code:

                                    <div class="dropdown-menu">
                                    <input type="text" class="form-control" id="myInput" onkeyup="myFunction()"placeholder="search.." title="namesearch">
                                    <div class="dropdown-divider"></div>
                                      @foreach($users as $user)
                                        <ul id="myUL">
                                        <li><a href="#">{{ $user->username }}</a></li>
                                        </ul>
                                        @endforeach 
                                    </div>
                                    </div>

And for my javascript (which only filters the top one (not sure why))

   var input, filter, ul, li, a, i, txtValue;
   input = document.getElementById("myInput");
   filter = input.value.toUpperCase();
   ul = document.getElementById("myUL");
   li = ul.getElementsByTagName("li");
   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";
       }
   }
}```

回答1:

You need to take your ul out of the foreach loop and only leave the li's inside it

<div class="dropdown-menu">
  <input type="text" class="form-control" id="myInput" onkeyup="myFunction()"placeholder="search.." title="namesearch">
  <div class="dropdown-divider"></div>
    <ul id="myUL">
      @foreach($users as $user) 
      <li><a href="#">{{ $user->username}}</a></li>
      @endforeach 
    </ul>
  </div>
</div>

来源：https://stackoverflow.com/questions/58859735/laravel-search-bar