Как сделать автозаполнение Ui-поиска по массиву объектов с использованием динамических c сгенерированных входных данных

Question

Чтобы создать смесь, пользователю необходимо выбрать 2 или более веществ.

Пользователь может искать вещество, хотя их 3 свойства:

1. "principio_ativo" - (active principle)
2. "apelidos"."descricao" - (nicknames.description)
3. "nomes_comerciais"."descricao" - (business_names.description)

Пример: пользователь можно выбрать вещество ниже для поиска «Глифосат», «Гифосато», «Глифосато», «Барис», «Брэддок», «Кредит» или «Раундап».

После того, как пользователь выберет все вещества, из которых он состоит смесь, мне нужно иметь массив, содержащий идентификатор всех выбранных веществ, например, если были выбраны 3 вещества: [12, 30, 31] (идентификаторы веществ).

Я не могу найти способ сделать так как я никогда раньше не работал с автозаполнением пользовательского интерфейса, не могли бы вы, ребята, помочь мне?

Пример объекта вещества:

{
  "id":12,
  "principio_ativo":"Glyphosate",
  "classe_id":1,
  "apelidos":[
     {
        "id":"12",
        "descricao":"Gifosato",
        "substancia_id":"12"
     },
     {
        "id":"13",
        "descricao":"Glifosato",
        "substancia_id":"12"
     }
  ],
  "nomes_comerciais":[
     {
        "id":21,
        "descricao":"Baris",
        "substancia_id":12
     },
     {
        "id":20,
        "descricao":"Braddock",
        "substancia_id":12
     },
     {
        "id":19,
        "descricao":"Credit",
        "substancia_id":12
     },
     {
        "id":18,
        "descricao":"Roundup",
        "substancia_id":12
     }
  ],
  "classe":[
     {
        "id":"1",
        "descricao":"Herbicida",
        "cor":"4fff4f"
     }
  ]
}

Javascript:

//- Dynamic generator
$("#add-substance").click(function() {

    $(".subs-append").append(`
        <div class="sub-novo-item d-flex row">
            <div class="ui-widget d-flex">
                <div class="sub-cor" style="background-color:lightgray;"></div>
                <input class="sub-input" type="search" placeholder="Ex.: Glyphosate, Baris...">
            </div>
        </div>
    `);
});

HTML:

<label>Substâncias</label>
<div id="div-substancia" class="mb-2 d-flex row">
    <div class="subs-append"> </div>

    <!-- Button to add new element -->
    <div class="div-add-reference">
        <button type="button" class="btn btn-secondary btn-sm btn-rounded" id="add-substance">Adicionar Substância</button>
    </div>
</div>

CSS:

#div-substancia {
    overflow: auto;
    max-height: 126px;
    border: 1px #dee2e6 solid;
    padding: 8px;
    margin: 0 ;
}

.subs-append {
    margin-bottom: 5px;
}

#add-substance {
    margin: 1px 0;
    width: 215px;
}

.sub-novo-item {
    margin: 0 0 3px 0 !important;
}

.sub-input {
    background-color: white;
    border: solid 1px lightgray;
    height: 30px;
    padding: 3px 0 0 8px;
    width: 200px;
}

.sub-cor {
    height: 30px;
    width: 16px;
    border-radius: 3px 0 0 3px;
}