显示前10个结果，隐藏其余的？[重复]

Question

我有一个php和SQL代码，用于使用input将数据提取到datalistHTML中。

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

<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>

我试图使用限制，但它隐藏了所有其他结果，我需要让它们都可用，只是当我单击输入时没有显示所有内容，而只是像前10个选项一样。

我还尝试在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

试试这个-

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

Answer 2

您可以使用css解决这个问题。试试下面的代码。这是一些相关的小提琴检查：点击这里

 
.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>