嗨,我使用Jquery UI的自动完成功能来获取数据库包含的成分。每个成分都有一个识别它的ID。选择成分后如何获得此ID?
这是带有查询以获取成分的代码

$(function() {
    var availableTags =
      <?php
        $query="SELECT Id,IngredientsName
        FROM ingredients";
        $result= mysqli_query($connect,$query)
        or die ("Error " . mysqli_error());

        $ingredients=array();
        while ($search=mysqli_fetch_array($result)) {
          $ingredientsName=$search[1];
          $ingredientsId=$search[0];
          array_push($ingredients,"$ingredientsName");
        }
        echo json_encode($ingredients);
      ?>
    ;
    $( "#inputIngredients").on("keyup",".IngName",function(){
      $(".nomeIng").autocomplete({
      source: availableTags,
      minLength: 2});
    });
  });
  </script>

最佳答案

首先,您需要在availableTags数组中包含信息。您应该将数据格式化为对象数组:

var availableTags = [{
  id: 1,
  label: "Eggs",
}, {
  id: 2,
  label: "Flour",
}, {
  id: 3,
  label: "Milk",
}];


在您的PHP中,您可以执行以下操作:

<?php
    $query="SELECT Id,IngredientsName
    FROM ingredients";
    $result= mysqli_query($connect,$query)
    or die ("Error " . mysqli_error());

    $ingredients=array();
    while ($search=mysqli_fetch_array($result)) {
      $ingredient = array( id => $search[0], label => $search[1] );

      array_push($ingredients, $ingredient);
    }
    echo json_encode($ingredients);
  ?>


这将以上述格式返回您的数据。您还可以添加所需的任何其他字段,但请确保您具有可搜索的label字段。

然后,使用id选项,只需在选择选项后使用select即可。 (我不知道您的html是什么样的,所以我在这里简化了示例):

简单的HTML:

<input id="inputIngredients">
<input type="hidden" id="ingredient-id">


JavaScript:

$("#inputIngredients").autocomplete({
  source: availableTags,
  minLength: 1,
  select: function( event, ui ) {
        $( "#ingredient-id" ).val( ui.item.id );
        $('#inputIngredients').val( ui.item.label );

        return false;
      }
});


小提琴示例:https://jsfiddle.net/5hf2jaem/1/

为了确保用户选择有效值,可以设置autoFocus: true并添加change处理程序:

$("#inputIngredients").autocomplete({
  source: availableTags,
  minLength: 1,
  autoFocus: true,
  select: function(event, ui) {
    $("#ingredient").text(ui.item.label);
    $('#inputIngredients').val(ui.item.label);
    $("#ingredient-id").val(ui.item.id);

    return false;
  },
  change: function(event, ui) {
    if (ui.item == null) {
      $("#ingredient").text("");
      $('#inputIngredients').val("");
      $("#ingredient-id").val("");
    }
  },
});


change处理程序仅在字段模糊时检查是否选择了有效值。

演示:https://jsfiddle.net/5hf2jaem/3/

10-07 15:56
查看更多