将输入传递给跨度字段

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;
});

将输入传递给跨度字段

Passing input to span field

html

javascript

function

getelementbyid