I have implemented autocomplete with jQuery AJAX. It's working fine when the screen size is half but while the screen size is full it's not working.
Another problem is that it doesn't show the result in the first input; it takes some time or when I remove the first attempt and type again in the input then autocomplete suggests result.
$(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>