将输入传递到跨度字段

Question

我正在尝试将输入中的输入传递到跨度字段。我使用带有结果的api下拉列表。因此，如果人们点击搜索结果，它将自动填写（非常类似于google）。我想将此结果传递给页面中的跨度字段。

但是，如果人们单击结果，我不希望发生onclick事件。而是当人们单击输入字段之外时。。

这是我尝试过的：

    <div>
        <input id="exercise-search" class="form-control" type="text" name="data">
    </div>
    <span id="namespan">Name</span>

以及简单的脚本：

        <script>

            var name = document.getElementById("exercise-search").value;
            document.getElementById("namespan").textContent=name;

            function reload(){
                var container = document.getElementById("namespan");
                var content = container.innerHTML;
                container.innerHTML= content;
            }
        </script>

但是我仍然必须手动刷新页面才能看到结果。我该如何自动化？

Answer 1

将change事件的侦听器添加到输入字段。当用户编辑字段并单击它时，将执行此操作。

document.getElementById("exercise-search").addEventListener("change", function() {
    var name = this.value;
    document.getElementById("namespan").textContent=name;
});