對不起，我可能在這里遺漏了一些小東西，但不知道。我使用 PHP 動態生成了一長串單選按鈕。串列頂部是一個 HTML 輸入，用于使用 jQuery 搜索串列。這有效，除了一個小細節。無論搜索結果如何，串列中的第一個單選按鈕始終顯示。即使我輸入了完全不同的內容，我也會始終看到串列中的第一個單選按鈕以及匹配的結果。
這里出了什么問題？
這是我使用 HTML 和 PHP 動態生成的單選按鈕串列：
<input id="addplantSearch" class="form-control" type="text" name="addplantsearch" placeholder="Zoek op (Latijnse) naam..." style="margin:0; height:48px;"> <!-- Search input -->
<?php
$query = "SELECT * FROM plants ORDER BY plants.name ASC;";
$post_data = $data->execute($query);
// Prepared statement in 'execute' method (Database class)
?>
<div class="addplant-list">
<?php
foreach ($post_data as $post) {
# Loop start
?>
<div class="searchable">
<label class="pselect-container"> <?php echo $post['name']; ?>
<input type="radio" name="selectPlant" value="<?php echo $post['plant_id']; ?>">
<span class="pselect-checkmark" style="width:100%;">
<img src="../system/src/img/plants/<?php echo $post['directory']; ?>/icon.png" />
<?php echo $post['name'] . " - (" . $post['name_latin'] . ")"; ?>
</span>
</label>
</div>
<?php
# Loop end
}
?>
</div>
這是我的 jQuery，負責搜索串列：
$("#addplantSearch").keyup(function() {
var value = this.value;
$(".addplant-list").find(".searchable").each(function(index) {
if (!index) return;
var id = $(this).find("span").first().text();
$(this).toggle(id.indexOf(value) !== -1);
});
});
編輯：串列中的第一項由我的資料庫結果的字母順序 (ASC) 確定（參見 $query 變數）。所以這總是按字母順序排列的相同專案。
uj5u.com熱心網友回復：
看起來您的問題與您的if陳述有關。
if (!index) return;
出現這個問題是因為 JavaScript 使用0基于陣列，而且0也是一個假值。意義：
!0 === true
并且陣列中的第一項將始終從函式回傳并且不適用于切換邏輯。
所以可能有很多方法可以解決這個問題，一種是在函式之前檢查陣列的長度each。前任：
$("#addplantSearch").keyup(function() {
var value = this.value;
var searchableItems = $(".addplant-list").find(".searchable");
if (searchableItems.length) {
searchableItems.each(function(index) {
var id = $(this).find("span").first().text();
$(this).toggle(id.indexOf(value) !== -1);
});
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/346973.html
標籤：javascript php 查询 搜索