Question

嘿，我在做一个小项目时遇到问题。我正在尝试创建一个搜索栏，可以在其中按名称，电子邮件，公司等过滤用户。

但是目前我只能按一项过滤... 也许如何解决该问题似乎很明显，但是我并不是真正的JavaScript专家。

我尝试制作其他变量来存储所选项目，但没有成功。

如果有人提出建议，将不胜感激！

<div class="input-group mb-3">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-search"></i></span>
   </div>
<input class="form-control" id="myFilter" autocomplete="off" type="text" onkeyup="searchFunction()" placeholder=" Search..">
   <div class="input-group-append">
      <select class="custom-select custom-select-mb" id="myFilterItems">
           <option value="" selected>Name</option>
           <option value="">Email</option>
           <option value="">Username</option>
           <option value="">Company</option>
       </select>
    </div>
<div class="container">
  getAccounts();
</div>

function getAccounts() {
        //include DataBase connection file.
        include 'includes/db_conn.php';

        //set Query to find selected active users.
        $sqlCollectAllUsers = "SELECT * FROM `users`";
        $resultAllUsers = mysqli_query($conn, $sqlCollectAllUsers);

        //Show results if > then 0.
        if ($resultAllUsers -> num_rows > 0) {
            while ($row = $resultAllUsers-> fetch_assoc()) {

            echo '<div class="card">';    
            echo    '<h5 class="card-header">'. $row['firstname'] .' '. $row['lastname'] .'</h5>';        
            echo        '<div class="card-body">';            
            echo            '<p class="username card-text"><b>Username: </b>'. $row['username'] .'</p>';                
            echo            '<p class="email card-text"><b>Email: </b>' .$row['email']. '</p>'; 
            echo            '<p class="company card-text"><b>Company: </b>'. $row['company'] .'</p>';             
            echo        '</div>';  
            echo        '<div class="card-footer">';                                                      
            echo          '<button class="btn btn-primary btnopenEditAccount" name="edit_id" value="' .$row['user_id']. '""><i class="fas fa-user-edit"></i></button>';                
            echo          '<button type="button" class="btn btn-danger btnremoveAccount" name="delete" value="' .$row['user_id']. '""><i class="fas fa-trash-alt"></i></button>'; 
            echo        '</div>';          
            echo '</div>';        
            }
          } else {
            //do something!
        }
    }

function searchFunction() {
    var input, filter, cards, cardContainer, h5, title, i;
    input = document.getElementById("myFilter");
    filter = input.value.toUpperCase();
    cardContainer = document.getElementById("myItems");
    cards = cardContainer.getElementsByClassName("card");
    for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector("h5");
        if (title.innerText.toUpperCase().indexOf(filter) > -1) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }
}

Answer 1

我可以看到

cardContainer = document.getElementById("myItems");
cards = cardContainer.getElementsByClassName("card");

您的html中不会退出ID“ myItems”，与“ card”类相同。

如何使用JavaScript制作搜索栏过滤器

1 个答案: