用PHP创建动态过滤列表，用JS搜索它们

Posted 2021-03-29

谁能告诉我如何使用php和与js一起使用的搜索栏创建动态过滤列表？我到目前为止这个代码：

function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerhtml.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<h1>Andere Inhalte</h1>
        
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<?php
foreach($workPlaceService->getAll() as $workPlace) {
        $id = $workPlace['id'];
?>  
<ul id="myUL">
  <li><a href="#"><?php echo $workPlace['uberschrift']; ?></a></li>
</ul>
        
<?php
}
?>

它显示了PHP结果，但我无法循环它们。有帮助吗？

谢谢！

答案

你无法遍历结果，因为你在每次迭代时都会创建很多uls。将<ul id="myUL">移出foreach：

<ul id="myUL">
<?php
foreach($workPlaceService->getAll() as $workPlace) {
        $id = $workPlace['id'];?>  
    <li><a href="#"><?php echo $workPlace['uberschrift']; ?></a></li>
<?php
}?>
</ul>

现在你有一个ul#myUL，迭代应该工作。另外，请不要忘记查看开发人员控制台以获取有关错误的信息。