How to set select box option if first 5 characters is equal to input field

Question

I have select box and input field, if input field value equal substring first 5 character in option value so set this option as a selected option.

I tired the following:

$(document).ready(function() {
  $('#input').change(function() {
    var inputVal = $(this);
    $('#select-box1 option').each(function() {
      var sb1_option = $(this).substring(0, 5);
      if (inputVal == sb1_option) {
        //What should I write here
      } else {
        //What should I write here
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-box1">
  <option value="00001-test 1">00001-test 1</option>
  <option value="00002-test 2">00002-test 2</option>
  <option value="00003-test 3">00003-test 2</option>
  <option value="00004-test 4">00004-test 4</option>
  <option value="00005-test 5">00005-test 5</option>
</select>
<input id="input" type="text" name="Input" value="">

score 1 · Accepted Answer · answered Feb 01 '19 at 00:27

You should be able to achieve this with the code below:-

Not much of a change to your original code, but I have updated the change() to keyup() otherwise it will not check until you focus out of the input field

$(document).ready(function(){
  $('#input').keyup(function(){
    var inputVal = $(this).val();
    $('#select-box1 option').each(function(){
      var sb1_option = $(this).val().substr(0,5);
      if(inputVal == sb1_option){
        $("#select-box1").val($(this).val());
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-box1">
  <option value="00001-test 1">00001-test 1</option>
  <option value="00002-test 2">00002-test 2</option>
  <option value="00003-test 3">00003-test 2</option>
  <option value="00004-test 4">00004-test 4</option>
  <option value="00005-test 5">00005-test 5</option>
</select>
<input id="input" type="text" name="Input" value="">

score 0 · Answer 2 · answered Feb 01 '19 at 01:39

Another solution to use input event

A good way to think about it is like this: it's an event that triggers whenever the input changes. This includes -- but is not limited to -- pressing keys which modify the input (so, for example, Ctrl by itself will not trigger the event, but Ctrl-V to paste some text will), selecting an auto-completion option, Linux-style middle-click paste, drag-and-drop, and lots of other things.

$(document).ready(function(){
  $('#input').on('input',function(){
    var inputVal = $(this).val();
    $('#select-box1 option').each(function(){
      var sb1_option = $(this).val().substr(0,5);
      if(inputVal == sb1_option){
        $("#select-box1").val($(this).val());
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select-box1">
  <option value="00001-test 1">00001-test 1</option>
  <option value="00002-test 2">00002-test 2</option>
  <option value="00003-test 3">00003-test 2</option>
  <option value="00004-test 4">00004-test 4</option>
  <option value="00005-test 5">00005-test 5</option>
</select>
<input id="input" type="text" name="Input" value="">

Thank You Guradio, what if I want to run this code in a table, means the same case but input and dropdown list are two columns in a table. I tried this code but again not working. — M.Gooda, Feb 02 '19 at 22:15

How to set select box option if first 5 characters is equal to input field

2 Answers2

Linked