Question

从datalist中选择一个选项后，我希望此javascript代码返回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>

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

2 个答案: