Editors Autocomplete Editor

Below is a working autocomplete lookup editor to be use in the row class. The json string specify the field names corresponding to what you need to update within autocomplete selection.

Within "autocompleteselect", the option decorator values are unavailable to be used. I had to use the data attribute of input control to store a json object string in input.data and then retrieve it within the autocompleteselect. The json string has the name of the fields to update when user make a selection.

1. Added below to your shared folder, compiled and transform template
2. In your row class add to our field for lookup: EmployeeLookupEditor(Pempnum = "fieldname1", Pfirstname = "fieldname2", Pfullname = "fieldname3", Plastname = "fieldname4", Prank = "fieldname5",Pusername = "fieldname6")
3. Test

namespace Your.NameSpace{
   
        //need to have an empty field to store list of field name for the autocomplete results
        @Serenity.Decorators.registerEditor()
        export class EmployeeLookupEditor extends Serenity.StringEditor {
        //these are set via the row when user use decorator
        @Serenity.Decorators.option()
        public plastname: string;
        @Serenity.Decorators.option()
        public pfirstname: string;
        @Serenity.Decorators.option()
        public pusername: string;
        @Serenity.Decorators.option()
        public pfullname: string;
        @Serenity.Decorators.option()
        public ptitle: string;
        @Serenity.Decorators.option()
        public pempnum: string;

        constructor(input: JQuery) {
            super(input);

            this.addValidationRule(this.uniqueName, e => {
                var value = Q.trimToNull(this.get_value());
                if (value == null) {
                    return null;
                }
                return EmployeeLookupEditor.validate(value);
            });

            input.bind('change', e => {
                if (!Serenity.WX.hasOriginalEvent(e)) {
                    return;
                }
                this.formatValue();
                

            });

            input.bind('blur', e => {
                if (this.element.hasClass('valid')) {
                    this.formatValue();
                }
            });
            //save json string to hidden expression field, list of field name to save info to
            //need to hard code name of one field list in order to save json string to and get json string from
            //in this case it is: "FieldList"
            input.bind('focus', e => {
                if (!Serenity.WX.hasOriginalEvent(e)) {
                    return;
                }
                //create the object from the option
                var fields = { ln: this.plastname, fn: this.pfirstname, un: this.pusername, en: this.pempnum, fullname: this.pfullname, title: this.ptitle};
                var fieldsstring = JSON.stringify(fields);
                //save json string in hidden field
                //save in same input.data field and retrieve it later in autocomplete
                input.data('empkey', fieldsstring);
      
            });

            this.bindAutoComplete(input);


          

        }
        protected bindAutoComplete(input): void {

            input.autocomplete({
                minLength: 4,
                autoFocus: true,
                source: function (request, response) {
                    $.ajax({
                        url: "../services/adlookup/autocompleteuserlookup",
                        type: "GET",
                        dataType: "json",
                        data: { term: request.term},
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.LastName + ", " + item.FirstName + " (" + item.Title + ")", value: item
                                };
                            }))

                        }
                    })
                },
                focus: function (event, ui) {
                    //this.value = ui.item.label;

                    $(".ui-helper-hidden-accessible").hide();  //fix issue with the selected data showing up on webpage
                    event.preventDefault();
                    return false;
                },

            })
                .on('autocompleteselect', function (e, ui) { //fill in data after it had been selected
                    var t = $(this),
                        //details = $('#EmpNumber'),
                        label = (e.type == 'autocompleteresponse' ? ui.content[0].label : ui.item.label),
                        value = (e.type == 'autocompleteresponse' ? ui.content[0].value : ui.item.value);


                    if (value.UserName.length > 0) {

                        
                        //get the option decorator as json object string we saved earlier
                        var jsonData = input.data('empkey');
                        var fields = JSON.parse(jsonData);

                        $('[name=' + fields.en + ']').val(value.EmpNum);
                        $('[name=' + fields.ln + ']').val(value.LastName);
                        $('[name=' + fields.fn + ']').val(value.FirstName);
                        $('[name=' + fields.un + ']').val(value.UserName);
                        $('[name=' + fields.fullname + ']').val(value.LastName + ", " + value.FirstName);
                        $('[name=' + fields.title + ']').val(value.JobTitle);

                    }

                    return false;
                })//;
                .data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $("<li>")
                        .append("<a>" + item.label + "<br>" + item.value.Descriptions + "</a>")
                        .appendTo(ul);
                };
        }
        protected formatValue(): void {
            this.element.val(this.getFormattedValue());
            
        }

        protected getFormattedValue(): string {
            var value = this.element.val();
            
            return EmployeeLookupEditor.formatemplookup(value);
        }

        get_value() {
            return this.getFormattedValue();
        }

        set_value(value: string) {
            this.element.val(value);
        }

        static validate(emplookup: string) {
            var valid = EmployeeLookupEditor.isValidemplookup(emplookup);
            if (valid) {
                return null;
            }
            return Q.text('Db.AllForms.EmployeeLookup.Validation');
        }

        static isValidemplookup(emplookup: string) {
            if (Q.isEmptyOrNull(emplookup)) {
                return false;
            }
            
            //not much to validate since it's a text field search
            return true;
        }

        static formatemplookup(emplookup) {
            if (!EmployeeLookupEditor.isValidemplookup(emplookup)) {
                return emplookup;
            }
           
            return emplookup;
        }
    }
}