填充数据列表花费的时间太长。用户在输入字段中输入几个字母后如何开始填充

Question

我有一个包含世界城市的数据库 table。总共有超过 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 个字母（如 on this website）时才开始填充过程。但我现在的问题是，我不知道如何将 javascript if 子句和 php 代码结合起来，因为 php 在我可以使用 javascript。我怎样才能像在提到的网站上那样创建这个功能？

Answer 1

我认为 JQuery autocomplete 是一个完整的答案。特别是 "remote datasource" 案例。