I was working on a POS app and i need to search for customers and use the user id in the App . This willl be useful .
Step 1: Create an API action to get your endpoint .
Go to server events > Global > Allpages > Api Action
put this code
// Customers live search endpoint
$app->get('/getallnames', function ($request, $response, $args) {
$response2 = $response->withJson(ExecuteRows("SELECT * FROM pos_customer ORDER BY fullname ASC")); // Select the record by name and return as JSON
return $response2; // Return Psr\Http\Message\ResponseInterface object
});
i assume you have a pos_customer table with at least id and fullname .
Step 2 : Now use this in your custom page
<head>
<!-- jQuery (already included in PHPMaker) -->
<!-- PHPMaker includes its own Select2 internally -->
</head>
<label class="visually-hidden" for="inlineFormSelectcostomers">Customer</label>
<select class="form-select" id="inlineFormSelectcostomers">
<option value="">Search customers...</option>
</select>
<script>
$(document).ready(function() {
// Initialize Select2 (PHPMaker's version)
$('#inlineFormSelectcostomers').select2({
placeholder: "Search customers...",
allowClear: true,
minimumInputLength: 1, // Start searching after 1 character
ajax: {
url: 'http://localhost/vintopos/api/getallnames',
dataType: 'json',
delay: 250, // milliseconds to wait before sending request
data: function(params) {
return {
search: params.term // search term
};
},
processResults: function(response) {
// Map your API response to Select2 format
return {
results: $.map(response, function(customer) {
return {
id: customer.id,
text: customer.fullname
}
})
};
},
cache: true
}
});
// Handle selection change
$('#inlineFormSelectcostomers').on('change', function() {
var selectedValue = $(this).val();
// Do something with the selected value
console.log(selectedValue );
});
});
</script>