php - 显示前 10 个结果，隐藏其余结果？

Question

这个问题已经有答案了:

Limit total entries displayed by datalist (3 个回答)

已关闭 6 年前。

我有一个 php 和 SQL 代码，用于将数据提取到 datalist 中。 HTML 带有 input .

代码相当通用，每个人都应该知道:

<datalist id="FindPlace">
 <option hidden></option>
 <?php
   $sql = "SELECT IDPlace, Place_Name, FKCity FROM Places WHERE Place_Name <> '' ORDER BY Place_Name";

   $result = $conn->query($sql);
   if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
     echo "<option>" . $row["Place_Name"] . "</option>";
     }
    }
  ?>
</datalist>

我尝试使用 LIMIT ，但它隐藏了所有其他结果，我需要让它们全部可用，只是当我单击 input 时不显示所有内容但只喜欢前 10 个选项。

我还尝试插入类似 $counter 的内容在 while 之间的 php 代码中和echo像这样:

<?php
$sql = "SELECT IDPlace, Place_Name, FKCity FROM Places WHERE Place_Name <> '' 
ORDER BY Place_Name";
$counter = 10;

$result = $conn->query($sql);
if ($result->num_rows > 0) {
 while ($row = $result->fetch_assoc()) {
  if ($row < $counter) {
   echo "<option>" . $row["Place_Name"] . "</option>";
  }
  else {
   break;
  }
 }
}
?>

但它不起作用。我真的不知道如何使用 JQuery，所以最好不要使用它，也许有一个我不知道的命令，或者一些技巧？

Answer 1

你可以使用CSS解决这个问题。尝试类似下面的代码。这是相关的 fiddle 检查:click here

 
.wrapper option:nth-child(n+11){
  background-color: gold;
  display:none;
}

<div class="wrapper">
    
    <option>Container #1</option>
    <option>Container #2</option>
    <option>Container #3</option>
    <option>Container #4</option>
    <option>Container #5</option>
    <option>Container #6</option>
    <option>Container #7</option>
    <option>Container #8</option>
    <option>Container #9</option>
    <option>Container #10</option>
    <option>Container #11</option>
    <option>Container #12</option>
    
</div>