Custom matching logic with enhanced select

[AdamBoxall]

I'm trying to customise the matching logic of a progressively enhanced select. I used the code below to match items that start with a given query instead of contain it:

var select = document.querySelector('...');
accessibleAutocomplete.enhanceSelectElement({
  selectElement: select,
  source: function matcher(query, syncResults) {
    if (!query) {
      syncResults([]);
    } else {
      syncResults(
        Array.from(select.options).filter(function(option) {
          return option.innerText.trim().toLowerCase().startsWith(query.toLowerCase());
        })
      );
    }
  },
  templates: {
    inputValue: function inputValue(option) {
      return option && option.value;
    },
    suggestion: function suggestion(option) {
      return option && option.innerText.trim();
    }
  }
});

The problem is that the inputValue template is used as the visible text of the select, which in my case is an unsightly MongoDB ID (e.g. 5d1cb51f990784796e0c25a3).

It would make more sense for the suggestion template to be used as the visible text, and the inputValue to be used as the value submitted with the form (at least in the case of an enhanced select).