user enters price in input field .. select box with auto range

Ok. Still busily figuring out our form, etc. So scenario. We have a form for member to enter a price. Typically, they would enter anything between 50,000 and 10,000,000. We also have select drop-down, with value ranges.

Example of the form so far:

<div class="field">
  <label for="propertyprice">Price</label>
  <input id="currency" name="limitedtextfield" size="50" type="text" class="medium" onKeyPress="return numbersonly(event, false)" onKeyDown="limitText(this.form.limitedtextfield,this.form,8);" 
onKeyUp="limitText(this.form.limitedtextfield,this.form,8);" maxlength="8"/>
  <p class="field_help">Enter only numbers.</p>
</div>

<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="100kmin">$100,000    -    $200,000</option>
    <option value="200kmin">$200,000    -    $300,000</option>
    <option value="300kmin">$300,000    -    $400,000</option>
    <option value="400kmin">$400,000    -    $500,000</option>
    <option value="500kmin">$500,000    -    $600,000</option>
    <option value="600kmin">$600,000    -    $700,000</option>
    <option value="700kmin">$700,000    -    $800,000</option>
    <option value="800kmin">$800,000    -    $900,000</option>
    <option value="900kmin">$900,000    -    $1,000,000</option>
    <option value="1milmin">$1,000,000    -    $2,000,000</option>
    <option value="2milmin">$2,000,000    -    $3,000,000</option>
    <option value="3milmin">$3,000,000    -    $4,000,000</option>
    <option value="4milmin">$4,000,000    -    $5,000,000</option>
    <option value="5milmin">$5,000,000    -    $10,000,000</option>
    <option value="10milplus">$10,000,000    -    +</option>
    </optgroup>
  </select>
</div>

What I would like to do, is the select price ranges automatically select the range that the users types in. There is no need to disable the select ranges, because we don't always need member to type in a price in input field, but we would like them开发者_如何学C to then select a range. So a kinda vice versa form.

Anyone ever done anything like this?

This works on your current code for values up to 9:

function findRange(e) {
   !e ? e = window.event : null;
   if(e.keyCode >=48 && e.keyCode <=57) {
     $('propertypricerange').selectedIndex = e.keyCode - 48;
   }
 }

 $('propertypricerange').onkeyup = findRange;

With values for 1 million and above, the user will have to type in more than one key, and also the Javascript will have to remember more than one key, so you may need an input box for that. If you don't want an input box, here's a variation on the code above that will remember as multiple values and select that index (e.g., type "1", "2" and you'll see index 12, backspace, you'll see index 1)

 var val = [];
 function findRange(e) {
   !e ? e = window.event : null;
   if(e.keyCode==8) {
     val.pop();
     $('propertypricerange').selectedIndex = val.join("");
   }

   if(e.keyCode >=48 && e.keyCode <=57) {
     val.push(e.keyCode - 48);
     $('propertypricerange').selectedIndex = val.join("");
   }
 }

 $('propertypricerange').onkeyup = findRange;

I would recommend you store the range values in a javascript var - if your ranges will never intersect, you can just use an array of the start values. Then, every time the onchange event is fired for the input box -

• Parse the value of the input box to a number
• Loop through the array of start points until you find a value which is greater than your parsed number and subtract 1 from the index.
• Change the selectedindex of the select box to the appropriate index.

EDIT: Here's a non-looping version. Simply uses arithmetic.

Example: http://jsfiddle.net/uv8Jh/4/

var sel = $('#propertypricerange')[0];

function findRange(val) {
    return ( val < 1000000 ) ? (val - val % 100000) / 100000 :
           ( val < 10000000 ) ? Math.min((val - val % 1000000) / 1000000 + 9, 14) :
            15;    
}
$('#currency').keyup(function() {
    sel.selectedIndex = findRange(this.value.replace(/[^0-9.]/g,''));
});

Original Answer:

Here's one solution, though it may need a little code to ensure that only numbers are entered into the input.

Doesn't rely on keycodes. Just compares the input value to the values that have been stored in an array.

Example: http://jsfiddle.net/uv8Jh/1/

   // cache the select list
var sel = $('#propertypricerange')[0];
   // Make an array of the values
var values = $.map( sel.options, function(opt) {
    return (opt.value.indexOf('kmin') > -1) ?
        parseInt(opt.value) * 1000 :
        parseInt(opt.value) * 1000000;
});
  // receive the current value and return the index of the proper range
function findRange( val ) {
    var i = 0, len = values.length;
    while( i++ < len ) {
        if( val < values[ i ] ) {
            return i-1;
        }
    }
    return len - 1;
}
   // set the proper range on keyup event
$('#currency').keyup(function() {
    sel.selectedIndex = findRange( this.value );
});

Again, there should be some cleanup in case the user types an invalid character. Simple regex should do it.

EDIT: Here's the key event with a little checking for invalid characters.

Example: http://jsfiddle.net/uv8Jh/2/

$('#currency').keyup(function() {
    sel.selectedIndex = findRange(this.value = this.value.replace(/[^0-9.]/g,''));
});

Easy peasy...

Rename your option IDs to something like this:

<input type="text" id="text-value" value="0" name="text-value" />
  <select id="select-list" name="select-list">
    <option id="min_100" value="100kmin">$100,000    -    $200,000</option>
    <option id="min_200" value="200kmin">$200,000    -    $300,000</option>
    ...
  </select>

$(function(){
  $('#select-list').change(function(){
    var _id = $(this).val().split('_');
    $('#text-value').val('$'+_id[1]+',000');
  });
});

Searching for the right selection can use the same method.

Full rewrite here. Supports number keys, numpad, and multiple-character entry, with backspace to remove. Entering 2-0-backspace will give you 200,000 - 2,000,000 - 200,000. Works in IE and FF. Does not need input field, just focus the drop down and type.

HTML, values adjusted for ease in Javascript:

<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>

Javascript:

//Keypress storage
var val = [];

//Keypress manager function
function findRange(e) {
  !e ? e = window.event : null;
  $('out').innerHTML = e.keyCode   // SORRY REMOVE THIS LINE (testing only)

  //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;

EDIT

Accepted solution actually refers to this, from the comments.