How to provide distinct values and labels?

Hello, I retrieve autocomplete data from a remote endpoint and populate results using populateResults:

    accessibleAutocomplete({
      element: el,
      id: "search_where",
      name: "where",
      source: debounce(async (query, populateResults) => {
        const res = await fetch(`${url}?q=${encodeURIComponent(query)}`);
        const data = await res.json();
        populateResults(res.results);
      }, 100),
    });

The res.results list received is of this form:

{
    "q": "pari",
    "results": [
        {
            "id": "75",
            "text": "Paris (département 75)"
        },
        {
            "id": "75056",
            "text": "Paris (75)"
        },
        // […]
    ]
}

I would like to render the text property value as the option label, but retrieve the id value when an option is selected by the user (a bit like what is possible using a regular <select> and <option value="42">Answer</option>). What data structure should I pass to populateResults to achieve that, if that’s even possible?

Thanks for your help!

[faithandrel]

My solution in React:

  const find = (key, array) => {
    return array.filter(item => item.text.toLowerCase().indexOf(key) !== -1);
  }

  const source = (query, populateResults) => {
    const cities = [
      {id: 1, text: 'Paris'},
      {id: 2, text: 'London'},
      {id: 3, text: 'Berlin'},
      {id: 4, text: 'Vienna'},
    ];
    const results = find(query, cities);
    populateResults(results);
  }

  const templates = {
    inputValue: (value) => {
      if (!value) {
        return '';
      }
      return value.text;
    },
    suggestion: (value) => {
      return value.text;
    }
  }

  const onConfirm = (selected) => {
    setSelected(selected.id)
  };

<Autocomplete id='autocomplete'
                      source={source}
                      templates={templates}
                      onConfirm={onConfirm}
                      confirmOnBlur={false} />

[n1k0]

@faithandrel ah, using templates is the way to go indeed, totally missed that reading the docs. Thank you for the hint, that’s nicely solving my problem 👍