Using autocomplete component with Select2

[ednaldomoreira]

		var SelectText = function(config) {
                        jsGrid.Field.call(this, config);
                    };

                    SelectText.prototype = new jsGrid.Field({
                        listSource: '',
                        lookupField: '',
                        listField: '',
                        mnemonicField: '',
                        fieldLKPIns: null,
                        fieldMNMIns: null,                            
                        fieldLKPEdt: null,
                        fieldMNMEdt: null,
                        itemTemplate: function(value) {
                            console.log(value)
                            return value
                        },

                        insertTemplate: function(value) {                               
                            const selectControl = $("<select>");
                            const self=this
                            $(selectControl).on('focus', function () { 
                                self.initTemplate('Insert')
                            }); 
                            return this._selectControlIns = selectControl;
                            
                        },
                        initTemplate: function(arg='Insert', value=null){
                            const fields=this._grid.fields;
                            fields.forEach(field=>{
                                if (field.name==this.lookupField){
                                    this.fieldLKPIns = field.insertControl
                                    this.fieldLKPEdt = field.editControl                                    
                                }
                                if (field.name==this.mnemonicField){
                                    this.fieldMNMIns = field.insertControl
                                    this.fieldMNMEdt = field.editControl
                                }                                    
                            })

                            const listSource    = this.listSource
                            const lookupField   = this.lookupField
                            const listField     = this.listField
                            const mnemonicField = this.mnemonicField
                            const fieldLKPIns   = arg=='Insert' ? this.fieldLKPIns : this.fieldLKPEdt
                            const fieldMNMIns   = arg=='Insert' ? this.fieldMNMIns : this.fieldMNMEdt
                            
                            const selectControl = arg=='Insert' ? this._selectControlIns : this._selectControlEdt
   
                            $(selectControl).select2({
                                ajax: {
                                    url: listSource + '/search',
                                    dataType: 'json',
                                    delay: 250,
                                    data: function (params) { 
                                        return JSON.parse('{"' +  listField + '":"' + params.term + '"}');
                                    },
                                    processResults: function (data) {
                                        var dataListSource = data[listSource].map(function (dsReturned) {
                                            if (fieldMNMIns==null){ 
                                                return {
                                                    id: dsReturned[lookupField],
                                                    text: dsReturned[listField]
                                                };
                                            }
                                            else{
                                                return {
                                                    id: dsReturned[lookupField],
                                                    text: dsReturned[listField],
                                                    mnemonic: dsReturned[mnemonicField]
                                                };
                                            }
                                        });
                    
                                        return {
                                            results: dataListSource
                                        };
                                    },
                                    cache: true
                                },
                                minimumInputLength: 3
                            });
                            $(selectControl).on('change', function () {                                     
                                $(fieldLKPIns).val($(selectControl).select2('data')[0].id);
                                if (fieldMNMIns!=null){
                                    $(fieldMNMIns).val($(selectControl).select2('data')[0].mnemonic);
                                }
                            }); 
                   
                        },

                        editTemplate: function(value) {
                            const fields=this._grid.fields;
                            fields.forEach(field=>{
                                if (field.name==this.lookupField){
                                    this.fieldLKPEdt = field.editControl                                    
                                }
                            })
                            const selectControl = $("<select>");
                            
                            const newOption = new Option(value, $(this.fieldLKPEdt).val(), false, false);
                            $(selectControl).append(newOption)                                                  
                            $(selectControl).val($(this.fieldLKPEdt).val());  
                            
                            const self=this
                            $(selectControl).on('focus', function () { 
                                self.initTemplate('Edit', value)
                            }); 

                            return this._selectControlEdt = selectControl;
                        },

                        insertValue: function() {
                            const selectedText = $(this._selectControlIns).find("option:selected").text()
                            return selectedText;
                        },

                        editValue: function() {
                            const selectedText = $(this._selectControlEdt).find("option:selected").text()
                            return selectedText;
                        }
                    });
                    jsGrid.fields.selectText = SelectText;