0

I have two text inputs on my page: One for a shorthand code and one for the text description of that code. Both inputs have a jQuery autocomplete applied. If the user selects a code from the autocomplete dropdown, it should automatically apply the text as well, and vice versa.

    $('#fc-workPerformedID').autocomplete({
        serviceUrl: BASE_URL + 'Qsys/FaultTypes',
        paramName: 'code',
        width: 'flex',
        autoSelectFirst: true,
        minChars: 1,
        transformResult: response => ({ suggestions: JSON.parse(response).map(d => ({ value: d.code, data: d })) }),
        formatResult: formatWT,
        onSelect: function (s) {
            $('#fc-workPerformedText').val(s.data.desc).change(); // I've added change() here
        }
    });

    $('#fc-workPerformedText').autocomplete({
        serviceUrl: BASE_URL + 'Qsys/FaultTypes',
        paramName: 'match',
        width: 'flex',
        autoSelectFirst: true,
        minChars: 2,
        transformResult: response => ({ suggestions: JSON.parse(response).map(d => ({ value: d.desc, data: d })) }),
        formatResult: formatWT,
        onSelect: function (s) {
            $('#fc-workPerformedID').val(s.data.code).change(); // I've added change() here
        }
    });

Quite logically, this didn't update the view model of the other input at first. For that, I found this approach, where the suggestion was to add a change() command after updating the input's value. I already did that in my code.

The problem with that approach is, that as soon as I call the change() command of that other input field, it also opens its autocomplete menu. So, for example, if I select something on the fc-workPerformedID input, the autocomplete menu of fc-workPerformedText opens immediately after clicking. If I remove the change() call again, it works again as intended.

Is there any way to prevent that? The user experience should simply be: Either enter the code or the text and the other value will be filled automatically and updated in the view model.

André Reichelt
  • 1,484
  • 18
  • 52
  • Have you tried updating the model directly via subscription to s.data.code instead of trying to update the DOM? – Jason Spake Feb 05 '20 at 16:52
  • @JasonSpake In the mean time I realized, that this only happens when a result in one autocomplete resolves into multiple results in the other autocomplete. It's strange, though. – André Reichelt Feb 11 '20 at 07:45

0 Answers0