JSFiddle - React, Tailwind, and code Playground

by steve

HTML

<div class="field">
  <label for="propertypricerange">Price Range </label>
  <select id="propertypricerange" name="propertypricerange" class="medium">
    <optgroup label="Enter Price Range">
      <option selected="selected" value="0balance">0    -    $100,000</option>
      <option value="1">$100,000    -    $200,000</option>
      <option value="2">$200,000    -    $300,000</option>
      <option value="3">$300,000    -    $400,000</option>
      <option value="4">$400,000    -    $500,000</option>
      <option value="5">$500,000    -    $600,000</option>
      <option value="6">$600,000    -    $700,000</option>
      <option value="7">$700,000    -    $800,000</option>
      <option value="8">$800,000    -    $900,000</option>
      <option value="9">$900,000    -    $1,000,000</option>
      <option value="10">$1,000,000    -    $2,000,000</option>
      <option value="20">$2,000,000    -    $3,000,000</option>
      <option value="30">$3,000,000    -    $4,000,000</option>
      <option value="40">$4,000,000    -    $5,000,000</option>
      <option value="50">$5,000,000    -    $10,000,000</option>
      <option value="100">$10,000,000    -    +</option>
    </optgroup>
  </select>
</div>

JavaScript

function $(id) { return document.getElementById(id); }

//Keypress storage
var val = [];

//Keypress manager function
function findRange(e) {
  !e ? e = window.event : null;
  

  //Enable backspacing
  if(e.keyCode==8) {
    val.pop();
    findIndex();
  }

  //Enable keyboard numbers
  if(e.keyCode >=48 && e.keyCode <=57) {
    val.push(e.keyCode - 48);
    findIndex();
  }

  //Enable numpad numbers
  if(e.keyCode >=96 && e.keyCode <=105) {
    val.push(e.keyCode - 96);
    findIndex();
  }
}

//Dropdown option value finder
function findIndex() {
  var opts = $('propertypricerange').options;
  for(x=0;x<opts.length;x++) {
    if(opts[x].value == val.join("")) {
      $('propertypricerange').selectedIndex = x;
      break;
    }
  }
}

//Event
$('propertypricerange').onkeyup = findRange;