Populating datalist takes too long. How to start populating after user enters a few letters in the input field

Question

I have a database table with cities of the world. All in all there are over 100 000 entries. The user should choose via input text field and the datalist one of those entries. Right now I populate the datalist options via PHP:

<input type='text' list='location' placeholder='Location'>
<datalist id='location'>
    <?php include("query.php");
        while($row = $result->fetch_assoc()) {
            echo "<option data-value='". $row['CityName']. "'>". $row['CityName']. "</option>";
    };?>
</datalist>

However, due to the large amount of rows it takes too long to load these options. Therefore I would like to start the populating procedure only when the user entered at least 3 letters in the input field (like on this website ). But my problem right now is that I don't know how to combine a javascript if clause and the php code as the php is loaded before I can use javascript. How can I create this function like on the mentioned website?

Answer 1

I think that JQuery autocomplete is a complete answer. In particular the "remote datasource" case.