Autocomplete add new item and set field value

[Charlene]

Hi Alexander,
I LOOOOOOVEEE DFFS, so first of all thank you for your work!

I’m using the autocomplete feature and what I’d like to happen is have a user search for their group with autocomplete, and then if it’s not in the list, I’d like them to add it to the list. When they click save I’d like to set the field value in the current list as well.

Right now, when I click Save, I see that the group is saved to the lookup list, but if I remove it and try to search for it again in the autocomplete field, it doesn’t come up in the results.

Is there a way to accomplish this “auto-reload and load”?

Here’s my code:

spjs.ac.textField({
 "applyTo": "Title",
 "helpText": "Find your group name",
 "loadText": "Loading...",
 "listGuid": "6080C3DE-8FD3-4927-8DD1-8CD47F1XXXXX",
 "listBaseUrl": "/sites/sss/ddd",
 "showField": "Title",
 "searchFields": ["Title"],
 "filterCAML":"<Eq><FieldRef Name='Author' LookupId='TRUE' /><Value Type='Integer'><UserID/></Value></Eq>",
 "useREST": false,
 "preloadData":false,
 "filterREST": "",
 "optionDetailFields": ["Group_ID", "Group_Name"],
 "optionDetailPrefix": ["Group ID: ", "Group Name: "],
 "enforceUniqueValues": true,
 "rowLimit": 15,
 "listOptionsOnFocus": false,
 "minLengthBeforeSearch": 3,
 "reValidateOnLoad": false,
 "allowAddNew": true,
 "addToFolder": null,
 "isLookupInSelf": false,
 "addNewAdditionalFields": [],
 "multiselect": false,
 "multiselectSeparator": "; ",
 "orderBy": [],
 "clearSetFieldsOnInvalidSelection": false,
 "setFields": [
     {
     "fromFIN":["Group_Name_LookupListFIN1"],
     "joinBy":"",
     "toFIN":"Group_Name_ThisListFIN1",
     "parseFunction":"",
     "skipIfEmpty":false
    },
    {
     "fromFIN":["Group_ID_LookupListFIN2"],
     "joinBy":"",
     "toFIN":"Group_ID_ThisListFIN2",
     "parseFunction":"",
     "skipIfEmpty":false
    }
],
 "debug": false
});

Thanks so much!

[Alexander Bautz]

I’m happy to hear that you like DFFS!

I did a test and it works as expected here. I have fixed a bug earlier that could explain this behavior so maybe you are using an older version of DFFS / autocomplete? – check the version by hovering over Enhanced with DFFS and check the version.

Alexander

[Charlene]

Ah! So I updated to the latest version and I see that the list will now show the new item, but it doesn’t automatically set field values once added to the new list. Is that what you say is supposed to happen?

Also, how do you set field values for choice fields? It doesn’t seem to be passing through.

[Alexander Bautz]

The autocomplete is destroyed and recreated when you add a new item so it is basically reloading with the new value already filled in the field – this means you just set “reValidateOnLoad”: true and you should get the setField filled in after you return to the form.

Let me know how this works out.

Alexander

[Charlene]

Works great! THANK YOU!!

One thing that isn’t working is the set field value from a choice field. Is there another way to get that to work?

[Alexander Bautz]

When pulling the value from a choice field you must use a parseFunction like this to get the proper format:

 "setFields": [
     {
     "fromFIN":["your_source_choice_field"],
     "joinBy":"",
     "toFIN":"your_target_choice_field",
     "parseFunction":"parseChoice",
     "skipIfEmpty":false
    }
],

function parseChoice(a, fin) {
    var arr = [];
    // use this format with "useREST": true
    // jQuery.each(a[0].results, function(i, v) {
    //     arr.push(v);
    // });
    // use this format with "useREST": false
    jQuery.each(a[0].split(";#"), function(i, v) {
        if (v !== "") {
            arr.push(v);
        }
    });
    return arr;
}

Let me know how this works out.

Alexander

[Charlene]

I tried adding this and it didn’t work for me. Is there a way to debug it? I console logged the value and it’s picking it up, but just not setting it.

[Alexander Bautz]

If you log the arr variable just above return arr; and it has the correct values you must ensure the field is of the same type, the choice values are actually available for selection in your current form and that you have the name of the target field correct.

Alexander

[Charlene]

Thanks Alex. For some reason it still wasn’t working with the choice field (only with a single line of text field), so I added another function set the value to the dropdown choice field and it’s working. That might not be the best way, but the only way I could get it to work.

function parseIChoice(a, fin) {
    var $I = $("select[title='Contact_method']");
    var arr = [];
    
    // use this format with "useREST": false
    jQuery.each(a[0].split(";#"), function(i, v) {
        if (v !== "") {
            arr.push(v);
        }
    });
    //alert(arr);
    $I.val(arr);
    return arr;
}

My second question is about turning multiselect on with set field. What I’d like to do is use this autocomplete feature for “templates”. When a user selects a template, I’d like to use the set field to populate a template of a multiline text box. When I use multiselect, the set field doesn’t work. Is there a way to modify the code to allow for set field to append to the multiline text box?

[Alexander Bautz]

I’m not sure why it didn’t work for you – it’s hard to tell without looking at it live.

It is unfortunately not so easy to change the setFields to also apply for multiselect – it is deactivated by design because it in most cases would make a complete mess to set all fields to match the last added option, or to stack up all selections.

I suggest you create this using custom code instead.

Alexander

[Charlene]

This is the message I get when I turn on multiselect.
“You cannot use the “setFields” section in the configuration when you are using the “multiselect” option.

Is there a way around this?

Attachments:

1. 

   autocomplete.png
   

[Alexander Bautz]

No, as I wrote above this is by design because of the mess it would make to have setFields apply when using multiselect. I suggest you try creating a separate solution that queries your template list, builds a dropdown you can select from and then appends your template text for each choice.

If you show me a mockup of what you try to make I might be able to help you get started.

Alexander

[Charlene]

Thanks so much Alexander! Here’s what I’m trying to do in the attachment.

Each time a template is selected, I’d like to append the text in the field to the bottom of the text box with a line break.

Attachments:

1. 

   Autocomplete_example.png
   

[Alexander Bautz]

Add this code to your Custom JS:

var textTemplateDataObj = {};
var templateTextTargetField = "Needs";
(function(){
    var res = spjs.utility.queryItems({
        "listName": "TextTemplates",
        "query": "<Where><IsNotNull><FieldRef Name='Text' /></IsNotNull></Where>",
        "viewFields": ["ID","Title", "Customer_Needs"]
    });
    var b = [];
    b.push("<div style='margin-bottom:10px;'>Select template: ");
    b.push("<select onchange='appendTemplateText(this)'>");
    b.push("<option value=''>...</option>");
    jQuery.each(res.items, function(i, item){
        b.push("<option value='"+item.ID+"'>"+item.Title+"</option>");
        textTemplateDataObj[item.ID] = item.Customer_Needs;
    });
    b.push("</select>");
    b.push("</div>");
    jQuery("#dffs_" + templateTextTargetField).find(".ms-formbody").prepend(b.join(""));
})();

function appendTemplateText(s){
    var tId = jQuery(s).val();
    if(tId !== ""){
        console.log(tId);
        var currText = getFieldValue(templateTextTargetField);
        var newText = textTemplateDataObj[tId];
        var padding = currText !== "" ? "\n\n": "";
        setFieldValue(templateTextTargetField, currText + padding + newText);
        jQuery(s).val("");
    }
}

You must edit the code and change “TextTemplates” to the name of your template list, “Needs” to match the internal name of your multiline textfield in the current form and “Customer_Needs” to match the multiline text field in the templates list.

Let me know how this works out.

Alexander

[Charlene]

Thank you Alexander! How does this function get triggered when the autocomplete field is changed?

[Alexander Bautz]

This does not use the autocomplete at all – it creates a custom drop-down list that it inserts above the textarea. When you make a selection in the drop-down list it appends the corresponding value to the textarea.

Alexander

• This reply was modified 3 years, 4 months ago by Alexander Bautz.

[Charlene]

I see.. The custom drop-down list doesn’t seem to pull in any of the templates from the template list.

[Alexander Bautz]

You must ensure you have changed the variables as I mentioned in my comment on June 26. If you hit F12 and select Console you might get more information (any error messages) that could help you figure what the problem is.

Alexander

[Charlene]

Thank you Alexander!!! I just had to change the query and it was finally picking up! THIS IS A GAME CHANGER! THANK YOUUUUUU!!!

[Alexander Bautz]

Thanks for the feedback – I’m glad you got it up and running.

Best regards,
Alexander

[Author]

Posts