javascript — заполнение даталистов занимает слишком много времени. Как начать заполнять после того, как пользователь вводит несколько букв в поле ввода

У меня есть таблица базы данных с городами мира. Всего более 100 000 записей. Пользователь должен выбрать через текстовое поле ввода и список данных одну из этих записей. Прямо сейчас я заполняю опции списка данных через 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>

Однако из-за большого количества строк загрузка этих параметров занимает слишком много времени. Поэтому я хотел бы начать процедуру заполнения только тогда, когда пользователь ввел по крайней мере 3 буквы в поле ввода (например, на этом сайте). Но моя проблема сейчас заключается в том, что я не знаю, как объединить JavaScript if предложение и код php как php загружается прежде, чем я смогу использовать javascript. Как я могу создать эту функцию, как на упомянутом веб-сайте?