填充datalist需要太长时间。用户在输入字段中输入几个字母后如何开始填充

Question

我有一个包含世界各城市的数据库表。总而言之，有超过10万个条目。用户应通过输入文本字段和数据列表中的一个条目进行选择。现在我通过PHP填充datalist选项：

<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个字母（如on this website）时才开始填充过程。但我现在的问题是，我不知道如何结合javascript if子句和php代码，因为在我使用javascript之前加载了php。如何在上述网站上创建此功能？

Answer 1

我认为JQuery autocomplete是一个完整的答案。特别是“远程数据源”案例。