PH Price Check

by SwampFall

HTML

<div class='wrapper'>
  <form autocomplete="off" onsubmit="return addItem();">
    <span>
      <div class="autocomplete" style="width:300px;">
        <input id="myInput" type="text" name="myCountry" placeholder="Item">
      </div>
      <input type="submit" value='Add'>
    </span>
    <table id='list'>
      <colgroup>
        <col width="70%">
        <col width="30%">
      </colgroup>
      <tr>
        <th>Item</th>
        <th>Quantity</th>
      </tr>
    </table>
    <div class='result'>
      Minimum <span id='minp'>0</span> <img src='https://staticpokeheroes.com/img/items/pokedollar.png' /><br> Maximum <span id='maxp'>0</span> <img src='https://staticpokeheroes.com/img/items/pokedollar.png' /><br><br> Minimum <span id='minn'>0</span>      <img src='https://staticpokeheroes.com/img/items/nugget.png' /><br> Maximum <span id='maxn'>0</span> <img src='https://staticpokeheroes.com/img/items/nugget.png' />
    </div>
  </form>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font: 16px Arial;
}

span {
  white-space: nowrap;
}
/* the container must be positioned relative: */

.autocomplete {
  position: relative;
  display: inline-block;
}

.wrapper {
  margin: auto;
  width: min-content;
}

input,
table,
.result {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

.result {
  width: 100%;
  margin-top: 3px;
}

table {
  margin-top: 3px;
  width: 100%;
  table-layout: fixed;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  margin-left: 3px;
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

input[type=number] {
  background-color: white;
  width: 100%;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /* position the autocomplete items to be the same width as the container: */
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/* when hovering an item */

.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/* when navigating through the items using the arrow keys: */

.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

JavaScript

function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    /*close any already open lists of autocompleted values*/
    closeAllLists();
    if (!val) {
      return false;
    }
    currentFocus = -1;
    /*create a DIV element that will contain the items (values):*/
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    /*append the DIV element as a child of the autocomplete container:*/
    this.parentNode.appendChild(a);
    /*for each item in the array...*/
    for (i = 0; i < arr.length; i++) {
      /*check if the item starts with the same letters as the text field value:*/
      var ps = arr[i].split(' ');
      for (var p of ps) {
        if (p.substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<img src='" + prices[arr[i]].sprite + "'/> " + arr[i];
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
          b.addEventListener("click", function(e) {
            /*insert the value for the autocomplete text field:*/
            inp.value = this.getElementsByTagName("input")[0].value;
            /*close the list of autocompleted values,
            (or any other open lists of autocompleted values:*/
            closeAllLists();
          });
          a.appendChild(b);
          break;
        }
      }
    }
  });
  /*execute a...