javascript - 如何从 Google Maps Searchbox 中获取价值并推送到新的 div 标签？

Question

我一般是编码新手，但我有一个关于如何从谷歌地图搜索框中捕获值以尝试然后动态创建一个div标签的问题，该标签将显示一行，其中包含输入到搜索框中的任何值。

我曾尝试创建一个.onclick()事件，但由于 Searchbox 不需要提交按钮来查找结果，因此证明是无用的。

// Adding event listener for when user clicks the add-bttn
$("#search").on("click", function() {

// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = $("#form-control").val();

console.log(itineraryInput);

})


.then(function() {

    var row = $("<div>");
    row.addClass("attraction");

    row.append("<p>" + itineraryInput + "</p>");


    $("#trans_first").prepend(row);
});

我在控制台中得到的错误是：

未捕获的 TypeError: $(...).on(...).then 不是函数。

我只是想从 Searchbox 中获取值，但不知道如何获得该结果。

标签： javascriptjquerygoogle-maps

Answer 1

然后你不需要使用，你可以把你的函数放在点击事件监听器中：

// Adding event listener for when user clicks the add-bttn
$("#search").on("click", function() {

  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#form-control").val();

  console.log(itineraryInput);

  var row = $("<div>");
  row.addClass("attraction");

  row.append("<p>" + itineraryInput + "</p>");


  $("#trans_first").prepend(row);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> Search
<input id="form-control" >
</label>
<button id="search">Search </button>

<div id="trans_first">

</div>