Hey @johnny
I am trying to use Jquery Autocomplete(Autocomplete | jQuery UI) feature in one of the Forms. Autocomplete works completely fine but problem comes when we hit the submit button. Somehow values set by Autocomplete get lost. Seems to be some conflict with React. Not sure how to debug this. Any quick pointers?
window.addEventListener('gcrud.form.add', () => {
$( document ).ready(function() {
var observer = new MutationObserver(function(mutations) {
if ($('.modal-footer').length!=0) {
$('input[name="search_text"]').autocomplete({
source: function (request, response) {
var request = convertFormToJSON($('.form-horizontal'));
$.post("search", request, response);
},
minLength: 2,
select: function( event, ui ) {
$('#gc-form-name').val(ui.item.name);
$('input[name="person_id"]').val(ui.item.person_id);
$('input[name="vehicle_no]').val(ui.item.vehicle_no);
$('input[name="contact_no"]').val(ui.item.contact_no);
groceryCrudSetFieldValue('depart_id', ui.item.depart_id);
},
response: function(event, ui) {
if (!ui.content.length) {
var noResult = { id:"",label:"No results found. Click to reset form." };
ui.content.push(noResult);
var search_by = $('select[name="search_by"]').val();
var search_text = $('input[name="search_text"]').val();
$('input[name="pm_update_required"]').val(1);
switch(search_by) {
case 'name':
$('input[name="name"]').val(search_text);
break;
case 'person_id':
$('input[name="person_id"]').val(search_text);
break;
case 'vehicle_no':
$('input[name="vehicle_no"]').val(search_text);
break;
case 'contact_no':
$('input[name="contact_no"]').val(search_text);
break;
}
}
},
insertAfter: $('input[name="search_text"]').next()
});
}
});
observer.observe(document.body, {childList: true, subtree: true });
});