填充數據列表需要很長時間。如何在用戶在輸入字段中輸入幾個字母后開始填充

Question

我有一個包含世界各城市的數據庫表。總而言之，有超過10萬個條目。用戶應該通過輸入文本字段和數據列表中的一個條目進行選擇。現在我通過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代碼，因爲在我可以使用JavaScript之前加載了php。我如何才能在提到的網站上創建此功能？

Answer 1

我認爲JQuery autocomplete是一個完整的答案。特別是「遠程數據源」的情況。