Is it possible to set a value for an existing autocomplete without triggering the options?

[Kataract]

My use case is probably an edge case - I have multiple instances of the autocomplete on a page. They are looking at the same data set, but are individual fields for parts of the data (e.g. name, email). In the autocomplete options, I want to show the concatenated results, but on selection fill the fields with parts of the data, not the entire string.

I accomplished this pretty okay with adding an inputValue callback:

 function inputFcn(selected) {
     if (selected) {
         var results = selected.split('-');
         if (results.length > 1) {
             document.getElementById('email-auto').value = results[1].trim();
         }
         selected = results[0].trim();
     }
     return selected;
};

But if input#email-auto is also an autocomplete, when I set the value it pops the options menu open with the only matching entry. I want to avoid this if possible, and I'm not sure if there is a way to accomplish this.

Please let me know if this is simply a bad practice as well - I'm trying to create a proof of concept that follows a particular requested set of guidelines right now, and if this is not something I should be doing I can take that back to the requestors and work out a better solution with them.

[NickColley]

Hey @Kataract,

Sorry for the delay responding to this.

This feels like a similar need to https://github.com/alphagov/accessible-autocomplete/issues/334

Please let me know if this is simply a bad practice as well - I'm trying to create a proof of concept that follows a particular requested set of guidelines right now, and if this is not something I should be doing I can take that back to the requestors and work out a better solution with them.

It does sound like there could be accessibility issues with this approach in general.

I'm going to leave this open as it's slightly different to the other issue but potentially they could be solved together.

[philliptaylorpro]

The autocomplete box doesn't open if there are no matches, so one viable solution seems to be to do this:

var autocompleteSilentMode = false;

function sourceFunction(query, syncCallback, asyncCallback) {
    if (autocompleteSilentMode) {
        syncCallback([]);
        autocompleteSilentMode = false;
        return;
    }
    // normal source function implementation
}

function setProgrammatically(newValue) {
    autocompleteSilentMode = true;
    $(control).val(newValue); // jQuery example, but whatever you're using
}