Javascript JQuery UI自动完成从输入中获取两个信息

嗨，我使用jqueryui的autocomplete函数来获取数据库包含的成分。每种成分都有一个标识。当选择了一种配料时，我如何获得该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);
  ?>

JavaScript:

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

        return false;
      }
});

小提琴示例：

要确保用户选择有效值，可以设置autoFocus:true并添加更改处理程序：

此更改处理程序仅检查字段模糊时是否选择了有效值

---

演示：

谢谢。你知道为什么当我点击一个建议时，输入没有完成吗？但如果我用向下箭头键检查它，然后按enter键，输入将完成，因为选择功能被覆盖。将其添加到select:函数：$'InputGredEnts'.val ui.item.label；回答已更新。抱歉，如果用户没有单击列表中的某个项目，但键入了有效值，我如何获取id？如果元素不在列表中，我更希望允许手动输入。但如果有一个元素存在，我想知道他的id。有可能吗？有可能，但据我所知，基本的自动完成并不容易。您可以编写一个函数，在自动完成输入模糊时对值进行最终搜索。此处演示：

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

        return false;
      }
});

$("#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("");
    }
  },
});