javascript - 搜索 MySQL & PHP 生成的 UL

Question

我已经实现了一个搜索栏，它循环到 UL (myUL) 并显示结果 (h5)。这适用于静态数据，但一旦我实现 PHP 调用来获取 MySQL，搜索将不再工作并显示结果。在控制台上，我看到它无法找到查询结果。

控制台日志

这是我实现搜索输入 并运行查询的一段代码：

<div class="page">
      <div class="page-content">
        <!-- Panel -->
        <div class="panel">
          <div class="panel-body">
            <form class="page-search-form" role="search">
              <div class="input-search input-search-dark">
                <i class="input-search-icon md-search" aria-hidden="true"></i>
                <input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users">
                
                <button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
              </div>
            </form>

           
            <div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs">
              <div class="dropdown page-user-sortlist">
                Order By: <a class="dropdown-toggle inline-block" data-toggle="dropdown"
                  href="#" aria-expanded="false">Last Active</a>
                <div class="dropdown-menu animation-scale-up animation-top-right animation-duration-250"
                  role="menu">
                  <a class="active dropdown-item" href="javascript:void(0)">Last Active</a>
                  <a class="dropdown-item" href="javascript:void(0)">Username</a>
                  <a class="dropdown-item" href="javascript:void(0)">Location</a>
                  <a class="dropdown-item" href="javascript:void(0)">Register Date</a>
                </div>
              </div>
<!-- KIEL ALL CONTACTS -->
              <ul class="nav nav-tabs nav-tabs-line" role="tablist">
              
              </ul>
              <div class="tab-content">
                <div class="tab-pane animation-fade active" id="all_contacts" role="tabpanel">
             
                <ul class="list-group" id="myUL">
    <?php
        $result = mysqli_query($conn,"SELECT * FROM customer");
        while($row = mysqli_fetch_array($result))
        {
    ?>
                    <li class="list-group-item">
                        <div class="media">
                            <div class="pr-0 pr-sm-20 align-self-center">
                                <div class="avatar avatar-online">
                                    <img src="../../../global/portraits/1.jpg" alt="...">
                                    <i class="avatar avatar-busy"></i>
                                </div>
                            </div>
                            <div class="media-body align-self-center">
                                <h5 class="mt-0 mb-5 name">
                                    <?php echo $row["customerName"]; ?>
                                    <small>Ultimo Acesso: <?php echo $row["customerLastLogin"]; ?></small>
                                </h5>
                                <p>
                                    <i class="icon icon-color md-pin" aria-hidden="true"></i>                            Street 4425 Golf Course Rd
                                </p>
                                <div>
                                    <a class="text-action" href="javascript:void(0)">
                                        <a href="mailto:<?php echo $row["customerEmail"]; ?>"><i class="icon icon-color md-email" aria-hidden="true" title="<?php echo $row["customerEmail"]; ?>"></i></a>
                                    </a>
                                    <a class="text-action" href="javascript:void(0)">
                                        <i class="icon icon-color md-smartphone" aria-hidden="true" title="<?php echo $row["customerPhone"]; ?>"></i>
                                    </a>
                                    <a class="text-action" href="javascript:void(0)">
                                        <i class="fas fa-box-open md-smartphone" aria-hidden="true" title="<?php echo $row["customerId"]; ?>"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
                                <button type="button" class="btn btn-icon btn-primary waves-effect waves-classic" data-toggle="modal" data-target="#updateUser<?php echo $row['customerId']?>">
                                    <i class="fas fa-pencil-alt md-notifications" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="btn btn-icon btn-danger waves-effect waves-classic">
                                    <i class="fas fa-trash-alt md-notifications" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </li>
    <script>
        function myFunction() {
            var input, filter, ul, li, a, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            ul = document.getElementById("myUL");
            li = ul.getElementsByTagName("li");
            console.log(li);
            // debugger;
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("h5")[0];
                txtValue = a.textContent || a.innerText;
                // debugger;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }
        </script>
                        </ul>
    <?php 
        } 
        // close connection database
        mysqli_close($conn);
    ?>

任何想法？

谢谢。

标签： javascriptphpmysql