Javascript 将输入传递到span字段

我正在尝试将输入从输入传递到范围字段。我使用带有结果的api下拉列表。因此，如果人们点击一个搜索结果，它会自动填充（很像谷歌）。我想将此结果传递给页面中的一个span字段

但是，如果人们点击结果，我不希望出现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>

var name=document.getElementById（“练习搜索”）.value；
document.getElementById（“namespan”）.textContent=name；
函数重载（）{
var container=document.getElementById（“namespan”）；
var content=container.innerHTML；
container.innerHTML=内容；
}

---

但是我仍然需要手动刷新页面才能看到结果。如何实现自动化？

将

更改事件的侦听器添加到输入字段。这将在用户编辑字段并从中单击时执行

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

reload（）
只是将元素的内部HTML设置为相同的内容。您在第一次加载页面时设置
name
，而不是在用户键入字段时。因为您不希望触发单击事件，而是在用户离开输入字段后，您是否尝试过使用
onBlur
事件触发更新您的
span
？