用 PHP 创建动态过滤器列表用 JS 搜索它们答案

【问题标题】：Create dynamic filterlist with PHP search them with JS用 PHP 创建动态过滤器列表用 JS 搜索它们
【发布时间】：2018-08-11 15:54:30
【问题描述】：

谁能告诉我如何使用 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 结果，但我无法遍历它们。有什么帮助吗？

谢谢！

【问题讨论】：

标签： javascript php search filter

【解决方案1】：

您无法循环遍历结果，因为您在每次迭代时都会创建大量 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，迭代应该可以工作了。另外不要忘记查看开发人员控制台以获取有关错误的信息。

【讨论】：