更新键输入列表的元素

Question

我一直在尝试创建一个列表，该列表会随着用户在文本框中输入值而更新。

字段分隔符可以是 space、逗号、制表符或换行符。多次出现的任何分隔符都将被截断。

到目前为止，我已经想出了以下代码，但它为每个由 space 分隔的值创建了一个 li 条目。

function myFunction() {
  document.getElementById("myUL").innerHTML = "";
  var node = document.createElement("LI");
  var input = document.getElementById("serverList");
  var val = input.value.split(/[\s,]+/);
  for (i = 0; i < val.length; i++) {
    var a = val[i].toUpperCase();
    var textnode = document.createTextNode(a);
    node.appendChild(textnode);
    document.getElementById("myUL").appendChild(node);
  }
}

<input type="text" id="serverList" onkeyup="myFunction()" placeholder="Enter the server list" title="Type in a name">
<ul id="myUL"></ul>

Answer 1

将您的 LI 创建移动到循环中

document.getElementById("serverList").addEventListener("input",function() {
  var input = this.value;
  var val = input.split(/[\s,]+/);
  document.getElementById("myUL").innerHTML="";
  for (var i = 0; i < val.length; i++) {
    var node = document.createElement("LI");
    var textnode = document.createTextNode(val[i].toUpperCase());
    node.appendChild(textnode);
    document.getElementById("myUL").appendChild(node);
  }
})

<input type="text" id="serverList" placeholder="Enter the server list" title="Type in a name">
<ul id="myUL"></ul>

Answer 2

您需要在每个for循环中创建一个新节点。

function myFunction() {
  document.getElementById("myUL").innerHTML = "";
  var node = document.createElement("LI");
  var input = document.getElementById("serverList");
  var val = input.value.split(/[\s,]+/);

  for (i = 0; i < val.length; i++) {
    var a = val[i].toUpperCase();
    var textnode = document.createTextNode(a);
    node.appendChild(textnode);
    document.getElementById("myUL").appendChild(node);
    node = document.createElement("LI");
  }
}

<input type="text" id="serverList" onkeyup="myFunction()" placeholder="Enter the server list" title="Type in a name">
<ul id="myUL"></ul>

更新键输入列表的元素

Update elements of list on keyentry

html

jscript