I try to use some of my jQuery plugins within Alpine (of course Alpine should replace jQuery in long-term). This autocomplete plugin theoretically works as expected, but I can't set the targetCustomerId from within the onSelect(). How can I access and change the values of my object properties from inside the autocomplete functions?
x-data="
postForm($el.id, 'contracts/add', {
targetCustomerId: '<?=$customer->CUSTOMERID;?>',
init() {
customerInput = $($refs.autocompleteInput).autocomplete({
type: 'POST',
serviceUrl: 'api/getCustomers',
onSearchStart: function() {
$(this).addClass('input-loader')
},
onSearchComplete: function() {
$(this).removeClass('input-loader')
},
onSearchError: function() {
$(this).removeClass('input-loader')
},
onSelect: function (suggestion) {
this.targetCustomerId = suggestion.value;
}
});
}
})
"
The postForm() is simplified just something like this:
function postForm(formId, url, objSettings) {
var defaults = {
form: document.getElementById(formId),
formData: '',
message: '',
isLoading: false
}
return {...defaults, ...objSettings};
}
According to https://github.com/devbridge/jQuery-Autocomplete's documentation, inside the onSelect method, the this variable refers the input element so we cannot access Alpine.js context like this, we have to use e.g. $data magic.
Assuming the response data looks like this:
{
"suggestions": [
{ "value": "Customer 1", "data": 1 },
{ "value": "Customer 2", "data": 2 }
]
}
So the data refers to CustomerId not the value field, the modified onSelect method:
onSelect: function (suggestion) {
$data.targetCustomerId = suggestion.data;
}
Here $data refers to Alpine.js data object, and suggestion is the clicked autocomplete item.