autocomplete:selected on v1

[o-alquimista]

Question 1

Before v1, we had to listen for the autocomplete:selected event to execute a function. How can I do the same on v1? Everything works differently now, and the documentation is driving me nuts.

I've read this but I can't understand a damn thing. I don't use JSX, I write plain JavaScript.

pre-v1 configuration:

]).on('autocomplete:selected', function(event, suggestion, dataset, context) {
  hiddenInput.value = suggestion.id;
});

v1-configuration:

autocomplete({
  container: '#autocompletarProcesso',
  placeholder: 'Pesquise por processos',
  getSources({setQuery, query}) {
    return [{
      sourceId: 'processos',
      getItems() {
        return [{id: 1, nome: 'processo 1'}, {id: 2, nome: 'processo 2'}];
      },
      templates: {
        item({item}) {
          return item.nome;
        },
        noResults() {
          return 'Nada encontrado';
        }
      }
    }];
  }
});

Question 2

When I select one of the suggestions (by keyboard or mouse), the input doesn't replace the query with the selected value. What am I missing?

Example:

1. type "p" on the search box
2. select one of the suggestions (e.g. "processo 1")

Expected search box value: "processo 1"
Actual search box value: "p"

[o-alquimista]

onSelect() and setQuery() are what I was looking for.

Such basic things buried so deep in the docs.

autocomplete({
  container: '#autocompletarProcesso',
  placeholder: 'Pesquise por processos',
  getSources({setQuery, query}) {
    return [{
      sourceId: 'processos',
      onSelect({item}) {
        setQuery(item.nome);
        // do anything else
      },
      getItems() {
        return [{id: 1, nome: 'processo 1'}, {id: 2, nome: 'processo 2'}];
      },
      templates: {
        item({item}) {
          return item.nome;
        },
        noResults() {
          return 'Nada encontrado';
        }
      }
    }];
  }
});

[o-alquimista]

A possibly better alternative is to use getItemInputValue() and leave onSelect for other tasks (such as setting the value of a hidden input on the page):

autocomplete({
  container: '#autocompletarProcesso',
  placeholder: 'Pesquise por processos',
  getSources({query}) {
    return [{
      sourceId: 'processos',
      getItems() {
        return [{id: 1, nome: 'processo 1'}, {id: 2, nome: 'processo 2'}];
      },
      getItemInputValue({item}) {
        return item.nome;
      },
      templates: {
        item({item}) {
          return item.nome;
        },
        noResults() {
          return 'Nada encontrado';
        }
      }
    }];
  }
});

[zadam]

Thanks, it's weird to have such basic functionality available only in some plugin with low visibility and IMHO misleading name "insights".

[sarahdayan]

Hey @o-alquimista and @zadam, and thanks for your feedback.

Indeed, if your goal is to change what value is used for completion, getItemInputValue is your best bet. This feature is documented in the sources guide, as this is a per-source behavior (you may want to do this one way for a source, and differently for another). Where would you have expected it to be documented?

I noticed that we indeed didn't document this use case in our upgrade guide, which could use a little polish. I've filed this in our internal backlog so we don't forget to tackle this.

Regarding JSX, we're totally aware that our JSX-only examples are annoying to non-JSX users and we've already planned on adding code snippets with plain HTML (as in this guide). We're also already considering how to best bring better template string support in Autocomplete.

Thanks for bearing with us!