jQuery dynamic number comparison

Question

I have a form with 1 input and 1 select with options (example: 2500, 3000, 4000, 5000)

I need to be able to:

Create an array for each options in the select
When I enter a value in the input field (number)
Determine between each select.value is the text.value
Fake click on the select.value which is the "min" range.

Example :

input = 2800 > Fake click on selection.option(2500)
input = 3200 > Fake click on selection.option(3000)

Where it's tricky, that's the select has different value on each page.

At this time, to test:

<input min="0" max="7000" class="largeur" value="" type="number" placeholder="" required="">

<select id="longueur" class="" name="attribute_longueur" data-attribute_name="attribute_longueur" data-show_option_none="yes">
  <option value="">Choisir une option</option>
  <option value="2508" class="attached enabled">2508</option>
  <option value="4785" class="attached enabled">4785</option>
</select>

$(".largeur").keyup(function() {
  console.log('keyup');
  $('#longueur option[value="2508"]').prop('selected', true); // Only to test fake click on value 2508
});

Thanks for the help!

Why do you need to 'fake click' on the `select`? Do you instead mean that you want to select the `option` element with the closest value to that entered? — Rory McCrossan, Nov 05 '19 at 17:14
Maybe I'll modify to a fake click... Because the click on option trigger another element to be displayed. — Alain Webcd, Nov 05 '19 at 23:47

score 0 · Accepted Answer · answered Nov 05 '19 at 17:25

To create the array of values you can use map(). From there you simply need to read the value which is typed in to the number input, then determine which value in the array is closest to that. The latter can be done following the code provided by @JoeGrund in this excellent answer. Then it's just a matter of setting the val() of the select. Try this:

var $select = $('#longueur');
var values = $select.children('option').map(function() {
  var value = $(this).val();
  return value.trim() == '' ? null : parseInt($(this).val(), 10);
}).get();

$('.largeur').on('input', function() {
  var typedValue = parseInt($(this).val(), 10);
  var closestValue = values.reduce(function(prev, curr) {
    return (Math.abs(curr - typedValue ) < Math.abs(prev - typedValue ) ? curr : prev);
  });
  $select.val(closestValue);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input min="0" max="7000" class="largeur" value="" type="number" placeholder="" required="">

<select id="longueur" class="" name="attribute_longueur" data-attribute_name="attribute_longueur" data-show_option_none="yes">
  <option value="">Choisir une option</option>
  <option value="2508" class="attached enabled">2508</option>
  <option value="4785" class="attached enabled">4785</option>
</select>

This is absolutely marvelous !!!!! Thank you very much Rory ! — Alain Webcd, Nov 05 '19 at 21:00
In fact, I think I didn't well explain the situation. I need, when input valie is between 100 and 200... take 200 value. for 331 > must be 400... It's not always round values (100 / 200 ...), it's strange value like 2785 / 4210 / 5320.... — Alain Webcd, Nov 06 '19 at 00:02
I solved it with this : https://codepen.io/dataprojekt/pen/wvvmpBO?editors=1010 — Alain Webcd, Nov 06 '19 at 01:02

jQuery dynamic number comparison

1 Answers1