I have an autocomplete drop down and i am trying to add a tags to the list. When i populate the availableTags array and run the project, it works fine as below

File.JS

var availableTags = [];
$(document).ready(function(){
$(function() {
    $( "#search-product" ).autocomplete({
      source: availableTags     
    }
    });
  });  
});


function getItems(token,id)
{  
     $.ajax({
        url: "/get/product/items",
        type: "POST",
        data: {
            _token: token,
            id:id,
        },
        success: (dataResult) => {
            availableTags.length = 0
            $.each(dataResult, function(index,products) {
              
               availableTags.push(products.name,products.price);

              }); 
        },
    });
}

Is there a way i can populate the the ul list with my a tags as below. This is what i have tried and when i run the project, it returns empty list.

Is there something i am doing wrong ?

JS

 function getItems(token,id)
    {  
         $.ajax({
            url: "/get/product/items",
            type: "POST",
            data: {
                _token: token,
                id:id,
            },
            success: (dataResult) => {
                availableTags.length = 0
                $.each(dataResult, function(index,products) {
                  
           availableTags.push( $(".ui-autocomplete").append('<li class="ui-menu-item" role="presentation"><a class="ui-corner-all" tabindex="-1">Apple & Samsung</a></li>'));
    
                  }); 
            },
        });
    }