Tengo un menú desplegable de autocompletar y estoy tratando de agregar etiquetas a la lista. Cuando completo la matriz de etiquetas disponibles y ejecuto el proyecto, funciona bien como se muestra a continuación

Archivo.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); }); }, }); }

¿Hay alguna manera de que pueda completar la lista ul con mis etiquetas a como se muestra a continuación? Esto es lo que he intentado y cuando ejecuto el proyecto, devuelve una lista vacía.

¿Hay algo que estoy haciendo mal?

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>')); }); }, }); }