Question

我有一个连接到我的数据库的下拉列表。此列表包含地理要素。

当我选择要点击的区域时，它会触发一个允许放大此区域的功能（onclick =＆＃34; zoomToCountry＆＃34;）。

此代码有效：

<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值也应该是唯一的，但看起来你有两次声明scot。你需要改变它......

下拉列表自动完成HTML

1 个答案: