下拉列表自動填充HTML

Question

我有一個連接到我的數據庫的下拉列表。該列表包含地理特徵。

當我選擇要點擊的區域時，它會觸發一個允許放大此區域的功能（onclick =「zoomToCountry」）。

此代碼：

<div class="dropdown"> 
    <label for="choix_scot"> Territoires : </label> 
    <select name="scot" id="scot"> 
    <?php 
     try{ 
     //Tentative de connexion à la bdd 
     $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres',''); 
     } 
     catch(Exception $e){ 
     // En cas d'erreur on affiche un message et on stop tout 
     die('Erreur : '.$e->getMessage()); 
     } 

     $requete ='SELECT "SCOT_2016", St_astext("geom") as "geom_ok" from "GEOMETRIES"."SCOT_GEOFLA_2016" ORDER BY "SCOT_2016" ASC'; 

     $listScot = $bdd -> query($requete); 

     foreach($listScot as $row){ 
     echo '<option value="'.$row['SCOT_2016'].'" onclick="zoomToCountry(\''.$row['geom_ok'].'\')">'.$row[0].'</option>'; 
     } 

     ?> 
    </select>  
</div> 

不過，我想提高下拉列表的功能。

例如，我想給用戶在列表中寫入（自動完成）的可能性。

下面的代碼允許我在我的列表中編寫但是它不再引用我的函數（onclick），它允許我進行動態縮放。

<div class="dropdown"> 
    <label for="choix_scot"> Territoires : </label> 
    <input list="scot" type="text" id="choix_scot"> 
    <datalist id="scot" > 
    <select name="scot" id="scot"> 
    <?php 
     try{ 
     //Tentative de connexion à la bdd 
     $bdd = new PDO('pgsql:host=localhost; dbname=TEST','postgres',''); 
     } 
     catch(Exception $e){ 
     // En cas d'erreur on affiche un message et on stop tout 
     die('Erreur : '.$e->getMessage()); 
     } 

     $requete ='SELECT "SCOT_2016", St_astext("geom") as "geom_ok" from "GEOMETRIES"."SCOT_GEOFLA_2016" ORDER BY "SCOT_2016" ASC'; 

     $listScot = $bdd -> query($requete); 

     foreach($listScot as $row){ 
     echo '<option value="'.$row['SCOT_2016'].'" onclick="zoomToCountry(\''.$row['geom_ok'].'\')">'.$row[0].'</option>'; 
     } 

     ?> 
    </select> 
    </datalist> 
</div> 

如何在保持動態縮放的同時實現自動完成功能？

Answer 1

您是否嘗試過使用類似於動態元素的東西？

$('document').on('click', '#scot>option', function() { 
    zoomToCountry(); 
}); 

id值也應該是唯一的，但它似乎你有兩次聲明的ID scot。你需要改變...