how do i send value from one autocomplete to another?

[ChaerilM]

i have this

Autocomplete.init('.js-select-province', {
  maximumItems: 5,
  server: '/api/provinces',
  liveServer: true,
  // notFoundMessage: 'No province found',
  fullWidth: true,
  queryParam: 'q',
  noCache: false,
  debounceTime: 200,
  activeClasses: ['bg-orange', 'text-white'],
  hiddenInput: true,
  onSelectItem: (item) => {
    $('.js-select-city').val('');
    $('.js-select-city').trigger('change');
  }
});

Autocomplete.init('.js-select-city', {
  maximumItems: 5,
  server: '/api/cities',
  liveServer: true,
  // notFoundMessage: 'No city found',
  fullWidth: true,
  queryParam: 'q',
  serverParams: {
    province_id: province_id
  },
  noCache: false,
  debounceTime: 200,
  activeClasses: ['bg-orange', 'text-white'],
  hiddenInput: true,
});

[lekoala]

you can use serverParams: related key it should contain the id of the field that contains the related data i've improved this to also pass the value with the name of the related field i've also added a small update to the docs to explain this

[ChaerilM]

tried with the name, didn't seems to work, or it's working but it took data from init while it was null instead of current

  serverParams: {
    province_id: $('[name="ads_province"]').val()
  },

  <div class="col-6">
    <label class="form-label" for="ads_province">Province *</label>
    <input class="form-control js-select-province" id="ads_province" name="ads_province" type="text" @required(true) placeholder="Province" autocomplete="off">
  </div>

  serverParams: {
    related: 'province_id',
  },

[lekoala]

check the demo.html related field param (should) work fine. the value is updating properly

https://github.com/lekoala/bootstrap5-autocomplete/blob/5f62fc31f94b5af7efc124bff6c282b21b3fbfd1/demo.html#L365-L379

make sure your input has an id matching the value set in related

[ChaerilM]

thanks, it finally works, and I have no idea why. perhaps because I updated the package. or something else.