JQuery use input text to preselect dropdown box

Question

With only a rudimentary knowledge of JQuery and Javascript, this is killing me. Essentially I want to have a drop-down list autoselect when certain text is entered in the input box. eg. "Foo" is a "Category4" item, so the select box should choose option 19 automatically if someone types Foo in the input box. "Bar" is a "Category7" item, so the select box should choose option 8 is someone types Bar in the input box.

The reason this isn't hardcoded is because the user will still have the option to recategorize these items if they see fit. ie. Normally "Bar" is a "Category7" item, so the script should automatically select option 8, but the user can change "Bar" to be a "Category1" item by manually selecting it in the dropdown box, and the script shouldn't overwrite the manual selection.

I've scrounged the script below that lets me type in the name of the Category in the input box and have it populate the dropdown, but I can't get to the next step of taking the input, comparing it to a list of predefined responses and using that to populate the dropdown.

<p id="demo"></p>
<input type="text" id="input" placeholder="input">
<select id="category">
  <option value="categoryplaceholder">Category</option>
  <option value="5">Category1</option>
  <option value="22">Category2</option>
  <option value="3">Category3</option>
  <option value="19">Category4</option>
  <option value="23">Category5</option>
  <option value="25">Category6</option>
  <option value="8">Category7</option>
</select>
<input type="submit" value="submit">

$(document).ready(function() {
  $("#input").change(function() {
    var val = $("#input").val();
    $("#category > option").each(function() { //Run through the loop of each option
      if (this.text.indexOf(val) >= 0) { //Find if the string present as substring
        $("#category > option").removeAttr("selected"); //Remove the existing selected option
        $(this).attr("selected", "selected"); //Select this matching option as selected
        return false; //Return after first match is found
      }
    });
  });
});

Super grateful for any help! https://jsfiddle.net/chuckler/w52kfpcy/

Answer 1

Another way you can go with jquery find the method for more details Click here

$(document).ready(function() {
  var Obj = [
    {
      word : 'FOO',
      category : '19'
    },
    {
      word : 'Bar',
      category : '8'
    },
    {
      word : 'Prashant',
      category : '25'
    },
  ];
  $("#input").on('change' , function() {
    var val = $("#input").val();
    var oFindObj = Obj.find(x=>x.word.toLowerCase().trim()==$.trim(val.toLowerCase()));
    if(oFindObj!=undefined){
      $("#category").val(oFindObj.category);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="demo"></p>
<input type="text" id="input" placeholder="input">
<select id="category">
  <option value="categoryplaceholder">Category</option>
  <option value="5">Category1</option>
  <option value="22">Category2</option>
  <option value="3">Category3</option>
  <option value="19">Category4</option>
  <option value="23">Category5</option>
  <option value="25">Category6</option>
  <option value="8">Category7</option>
</select>
<input type="submit" value="submit">

Answer 2

You can use an object to hold your words and its category

$(document).ready(function() {
  var Obj = [
    {
      word : 'FOO',
      category : '19'
    },
    {
      word : 'Bar',
      category : '8'
    },
  ];
  $("#input").on('change' , function() {
    var val = $("#input").val();
    $.each(Obj , function(i , v){
      if(v.word.toLowerCase().trim() == val.toLowerCase().trim()){
        $('#category').val(v.category);
        return false;
      }
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>
<input type="text" id="input" placeholder="input">
<select id="category">
  <option value="categoryplaceholder">Category</option>
  <option value="5">Category1</option>
  <option value="22">Category2</option>
  <option value="3">Category3</option>
  <option value="19">Category4</option>
  <option value="23">Category5</option>
  <option value="25">Category6</option>
  <option value="8">Category7</option>
</select>
<input type="submit" value="submit">

Take in consider:

• Input .change event will fire after focus out something like blur
• Use .text() to use the option text instead of its value
• Use .trim() to remove any white-spaces left/right
• Use .toLowerCase() for letters case sensitive
• If you need real-time change you can use .on('input' , function(){....}) instead of .change()