Laravel搜索栏 [英] Laravel search bar

问题描述

我正在尝试为一个项目构建一个搜索栏，其中效果最好"的那个是w3中的那个 我并不是想让您在其中按Enter键，而只是在不连接到我的数据库的情况下对单词进行过滤.

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.

这是我的代码:

                                    <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>

对于我的JavaScript(仅过滤排名靠前的JavaScript(不确定原因))

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";
       }
   }
}```

推荐答案

您需要将ul移出foreach循环，而只将li留在其中

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>

这篇关于Laravel搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！