显示前10条结果，隐藏其余部分？

Question

我有一个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个选项。

我也试图插入PHP代码while和echo之间像$counter这样的：

<?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解决这个问题。尝试下面的代码。这事有关小提琴检查：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>