时间戳

首页 > 解决方案 > Laravel 搜索栏

laravel - Laravel 搜索栏

问题描述

我正在尝试为一个项目构建一个搜索栏，“最有效”的是来自 w3 的搜索栏到我的数据库。

这是我的代码：

                                    <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 （只过滤顶部的（不知道为什么））

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

标签： laravelsearchbar

解决方案

你需要把你的ul从foreach循环中拿出来，只把li留在里面

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

推荐阅读