Show first 10 results, hide the rest?

Question

I have a php and SQL code I use to extract data into a datalist HTML with input.

The code is fairly generic and should be know to everyone:

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

I've tried to use LIMIT, but it hides every other result, where in I need to have them all usable, just not showing everything when I click on the inputbut only like first 10 options.

I also tried to insert something like $counter in php code between whileand echolike this:

<?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;
  }
 }
}
?>

And it didn't work. I don't really know how to use JQuery so it would be preferable to not use it, maybe there's a command I don't know, or some trick?

You might want to think of a next/prev system, because if you have a lot of places, you will get a slow page, for only 10 items (visitors dont care about hidden items) — Martijn, Sep 01 '17 at 07:57
The obvious answer would be to use css, but there doesn't appear to be a way to style this. Suggestion is to drop datalist and use an auto-complete plugin. https://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options — freedomn-m, Sep 01 '17 at 08:16

chirag satapara · Answer 1 · 2017-09-01T08:00:29.063

1

you can solve this using a css. Try something like below code. This is something relevant fiddle check this: 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>

edited Sep 01 '17 at 08:00

answered Sep 01 '17 at 07:54

chirag satapara

1,947
1
15
26

The css doesn't work. Shows me all options instead of first 10. – Tree Sep 01 '17 at 07:58
Beautiful ... wasn't aware of that possibility – Veljko89 Sep 01 '17 at 07:59
@Zabusy, you want something like this? – chirag satapara Sep 01 '17 at 08:01
@chiragsatapara Yeah, the idea is something like that, though the hidden contrainers should still be accessible if I write their name in `datalist` and `input` – Tree Sep 01 '17 at 08:02
Your snippet doesn't use a `datalist`. You can't use css on a datalist. – freedomn-m Sep 01 '17 at 08:17

score 0 · Answer 2 · answered Sep 01 '17 at 07:52

0

Try this -

$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;
        }
    }
}

answered Sep 01 '17 at 07:52

Nikhil G

2,096
14
18

Tried. Maybe the problem is something else? Now in my `input` it doesn't show anything, as the case with my second example. – Tree Sep 01 '17 at 07:55

Show first 10 results, hide the rest?

2 Answers2