Как получить значение из активного li> a, используя Jquery из Mapbox API?

Question

Я пытаюсь получить значение из прямого геокодера, который предсказывает адреса, когда кто-то печатает, и отправить это значение в форму с идентификатором «раскладка».Кажется, я не могу захватить li> a из api mapbox, который становится активным, когда кто-то начинает вводить данные.

Вот снимок экрана поиска адреса Mapbox:

Фрагмент кода, который я пытаюсь выполнить.Я также пробовал много вариантов этого:

$("ul.suggestions").find("li.active").click(function() {
    pickupLoc = $(this).attr("value");
    $("#pickup")[0].value= pickupLoc; 
});

Спасибо!

Answer 1

Я избегал попыток получить доступ к активному лицу все вместе и просто вытащил окончательный текст адреса после того, как пользователь выбрал их, используя селектор запроса документа и .value.Здесь добавлен идентификатор mapbox-directions-origin-input, поскольку есть поле ввода источника и назначения.Этот выбирает источник ввода:

function myFunction() {
  let origin = document.getElementById("mapbox-directions-origin- 
  input").querySelector(".mapboxgl-ctrl-geocoder 
  input").value;

  document.getElementById("pickup").value = origin; 
  };

Answer 2

Нет атрибута value элемента li .Попробуйте вместо text().

Заменить

pickupLoc = $(this).attr("value");

На

pickupLoc = $(this).text();

Демо:

$("ul.suggestions").find("li.active").click(function(){
  var pickupLoc = $(this).text();
  console.log(pickupLoc);
});

.active{
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="suggestions">
  <li class="active">
    <a>
      <strong>ABC</strong>
      Sample Text 1
    </a>
  </li>
  <li>
    <a>
      <strong>SDF</strong>
      Sample Text 2
    </a>
  </li>
</ul>