Jquery UI Autocomplete with Grocery Crud 3.1

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) {
                        source: function (request, response) {
                            var request = convertFormToJSON($('.form-horizontal'));
                            $.post("search", request, response);
                        minLength: 2,
                        select: function( event, ui ) {
                            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." };
                                var search_by = $('select[name="search_by"]').val();
                                var search_text = $('input[name="search_text"]').val();
                                switch(search_by) {
                                    case 'name':
                                    case 'person_id':
                                    case 'vehicle_no':
                                    case 'contact_no':
                        insertAfter: $('input[name="search_text"]').next()
            observer.observe(document.body, {childList: true, subtree: true });

Hi @johnny

Could you please help. I have tried everything and completely blocked here and but not getting any clue here.

Hello @kapilchugh ,

From what I see you are missing a hidden input depart_id . You need to somehow present this field into the PHP CRUD somehow. If you don’t want to show it you should use it as fieldType hidden. If this still doesn’t work try to use the $crud->fieldType(‘depart_id’, ‘hidden’); and don’t forget to add ‘depart_id’ within the list of the edit fields.

If this still doesn’t work, can you copy your function in your controller? Maybe there is something missing there?