Автокомплит, как сделать несколько value и получить второй запрос?

Question

[Kakto-Tak]

Всем привет, в яваскрипте совсем не моё, помогите.
на сайте есть input, где пользователь начинает вводить город, например "Мос..." и из автокомплита выбирает "Москва".
Поиск осуществляется запросом к скрипту, от которого получает json-ответ.
Так вот, поле input заполняется словом "Москва", но в ответе есть ещё и id этого города (например 44). Как сделать так, чтобы выбирался ещё и этот id и происходил запрос к другому скрипту (/price.php?city="+ id"), где получал нужный ответ (в данном случае расстояние)?
Коротко о том, что должно получиться: Пользователь пишет название города, ему предоставляется выбор, он выбирает нужный, в поле инпут1 вписывается название города, после этого выбора в инпут2 подставляется ответ (расстояние до этого города).

Вот код, который есть сейчас:

<script>
  $(() => {
    var options = {
      url: function(phrase) {
        return `/autocomplete.php?str=${encodeURIComponent(phrase)}`;
      },
      listLocation: "cities",
      getValue: "name"
    };
    $("#remote").easyAutocomplete(options);
  })
</script>
<input id="remote" />

Answer 1

[Radiks Alijevs]

Привет, у `easyAutocomplete` есть встроенные функции, с помощью которых можно получить дополнительные данные. В вашем случае вам подойдёт функция `getSelectedItemData()`, которая отобразит `id`. Далее этот `id` вам нужно приложить к вашему скрипту `(/price.php?city="+ id")`.

Пример получения дополнительных данных из массива:

<input id="function-data" />
<input id="data-holder" />

var options = {
	data: [
		{"character": "Cyclops", "realName": "Scott Summers"},
		{"character": "Professor X", "realName": "Charles Francis Xavier"},
		{"character": "Mystique", "realName": "Raven Darkholme"},
		{"character": "Magneto", "realName": "Max Eisenhardt"}
		],

	getValue: "character",

	list: {

		onSelectItemEvent: function() {
			var value = $("#function-data").getSelectedItemData().realName;

			$("#data-holder").val(value).trigger("change");

                        // Тут вы можете делать манипуляции с вашим вторым скриптом
		}
	}
};

$("#function-data").easyAutocomplete(options);