如何使用数据列表 return javascript 对象中值的位置

Question

从 datalist 中选择一个选项后，我希望这个 javascript 代码到 return javascript 中的 option 位置 object.

不使用 datalist 代码按预期工作。

为什么这不起作用？

Javascript 可以在不重新加载某种页面的情况下响应来自 datalist 的新输入吗？我希望这不需要 PHP.

var input = document.getElementById("myInputId");
input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});

function result() {
  document.getElementById("location").innerHTML = input.value;
}

myObj = {
  "type":"A",
  "info": [
    { "item":"1", "properties":{ "id":"AL", "height": "25", width: "50" } },
    { "item":"2", "properties":{ "id":"PO", "height": "30", width: "40" } },
    { "item":"3", "properties":{ "id":"RA", "height": "20", width: "100" } }
  ]
}

myObj.info.forEach(function(e, z) {
  var q = document.getElementById("location").innerHTML;
  if (e.properties.id == q) {
    document.getElementById("position").innerHTML = z;
    document.getElementById("width").innerHTML = myObj.info[z].properties.width;
  }

});

<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="result()">submit</button>

<datalist id="myInput">
<option>AL</option>
<option>PO</option>
<option>RA</option>
</datalist>

<p>Result:<span id="location"></span></p>
<p>Position in object:<span id="position"></span></p>
<p>Width:<span id="width"></span></p>

Answer 1

好吧，看看这段代码：在结果函数中，myInputId 不是变量，看起来应该是 input.value，或者将输入变量名称更改为 myInputId，看看你是否还有其他问题。

编辑

好的，你的问题是它没有更新位置等...

你为什么不把那个 forEach 循环放在结果函数中，现在的样子似乎没有理由应该更新。

Answer 2

可以使用.find()查找选中的元素，然后给右边的html个元素赋值：

var input = document.getElementById("myInputId");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function result() {
  
  var res = myObj.info.find(({properties}) =>
     properties.id === myInputId.value
  );
  
  /*
  // you can also use .forEach()
  
  var res;
  myObj.info.forEach(e => {
    if(e.properties.id === myInputId.value)
      res = e;
  });
  */
  
  if(res){
    document.getElementById("location").innerHTML = res.properties.id;
    document.getElementById("width").innerHTML = res.properties.width;
    document.getElementById("position").innerHTML = res.item;
  }
}

myObj = {
  "type":"A",
  "info": [
    { "item":"1", "properties":{ "id":"AL", "height": "25", width: "50" } },
    { "item":"2", "properties":{ "id":"PO", "height": "30", width: "40" } },
    { "item":"3", "properties":{ "id":"RA", "height": "20", width: "100" } }
  ]
}

/*
myObj.info.forEach(function(e, z) {
var q = document.getElementById("location").innerHTML;
  if (e.properties.id == q) {
    document.getElementById("position").innerHTML = z;
    document.getElementById("width").innerHTML = myObj.info[z].properties.width;
  }
  
});
*/

<input list="myInput" id="myInputId" value="">
<button id="myButton" onClick="result()">submit</button>

<datalist id="myInput">
<option>AL</option>
<option>PO</option>
<option>RA</option>
</datalist>

<p>Result:<span id="location"></span></p>
<p>Position in object:<span id="position"></span></p>
<p>Width:<span id="width"></span></p>

如何使用数据列表 return javascript 对象中值的位置

How to return the position of a value in a javascript object using a datalist

html

javascript

object

html-datalist