Как показать результаты в автозаполнении на основе объекта

Question

Я новичок в кодировании (один месяц), и я не совсем уверен, как подойти к этому. То, что я пытаюсь сделать, это когда я нажимаю на элемент, показанный в автозаполнении, чтобы показать абзац с его описанием. Если вход в автозаполнении совпадает с «именем» в объекте, чтобы показать остальные детали объекта на странице. Если у вас, ребята, есть какие-то указания на это, это было бы удивительно.

Мой объект

var ingredients = [
 {
id: 1,
name: "onion",
defaultUnit: "g",
},
{
id: 1,
name: "onion",
defaultUnit: "g",
},];

 $("#searchIngredient").autocomplete({
 source: myIngredients,
});

var searchQuery = $("input[type = 'text']").val();

$.each(ingredients, function (index, value) {
  var ingredientName = value.name;
  console.log(ingredientName);
});

$("#ingredientDetails").click(function () {
  if (searchQuery === ingredientName) {
    alert("it's matching");
  }
});