How to create a html page with an input and it tells the object properties of the input?-CodePudding

I want to create a html page in which there is an input. For eg I am entering an Input Mango, it alerts properties of the object. for eg. in case of mango -

color = 'Yello'
tasste = 'sweet'
price = 30

Can you please help me out doing this.

CodePudding user response：

You can simply define the data json to a var and extract it's value whenever you user has entered any value in the input box by using the EventListener ....

You can try:

// Add more items as per your choice in it

data = {
  "mango": {
    "color": "Yello",
    "tasste": "sweet",
    "price": 30
  },
  "apple": {
    "color": "Red",
    "tasste": "sweet",
    "price": 40
  }
}

document.getElementById("input").addEventListener('input', function(evt) {
  if (data[this.value]) {
    document.getElementById("details").innerHTML = `Color : ${data[this.value]['color']}<br>
    Taste : ${data[this.value]['tasste']}<br>
    Price : ${data[this.value]['price']}`;
  } else {
    document.getElementById("details").innerHTML = "Invalid Input.<br>Please enter a valid value";
  }
});

<input type="text" id="input">
<div id="details"></div>