Question

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 to then select a range. So a kinda vice versa form.

Anyone ever done anything like this?

Answer 1

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,''));
});