He implementado autocompletar con jQuery AJAX. Funciona bien cuando el tamaño de la pantalla es la mitad, pero mientras el tamaño de la pantalla está lleno, no funciona.
Otro problema es que no muestra el resultado en la primera entrada; toma algo de tiempo o cuando elimino el primer intento y escribo nuevamente en la entrada, luego autocompletar sugiere el resultado.
$(document).ready(function() { $("#purchase_item_search").on('keyup', function() { var arrayReturn = [] $.ajax({ url: "/products", dataType: 'json', success: function(data) { for (var i = 0; i < data['products'].length; i++) { var id = (data['products'][i].id).toString(); arrayReturn.push({ 'data_id': id, 'value': data['products'][i].name, 'name': data['products'][i].name, 'price': data['products'][i].purchase_price, 'discount': data['products'][i].discount, 'tax': data['products'][i].tax_id, }) printProduct(arrayReturn); } } }); function printProduct(arrayReturn) { $('#purchase_item_search').autocomplete({ source: arrayReturn, select: function(event, products) { // Set selection $('#purchase_item_search').val(''); // display the selected text createRow(products); return true; } }); } const tbody = document.getElementById('item_list'); function createElement(tagName, id, className, innerHTML) { const element = document.createElement(tagName) element.id = id || '' element.className = className || '' element.innerHTML = innerHTML || '' return element } function createRow(products) { // ... } }); }); <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="{{ asset('assets/backend/bundles/libscripts.bundle.js') }}"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>