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/

Mohamed-Yousef · Accepted Answer · 2019-11-17 00:32:32Z

1

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

edited Nov 17, 2019 at 0:32

answered Nov 17, 2019 at 0:03

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chuckler Over a year ago

Thankyou for replying. This snippet doesn't seem to select "Foo" to "Category4" or "Bar" to "Category7" ?

Chuckler Over a year ago

Omg this is exactly what I was trying to do! Thanks so much for your help!

Mohamed-Yousef Over a year ago

You're totally welcome @Chuckler . Have a great day :-)

Prashant Girase · Accepted Answer · 2019-11-17 05:29:20Z

0

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

answered Nov 17, 2019 at 5:29

Prashant Girase

1371 gold badge1 silver badge11 bronze badges

1 Comment

Chuckler Over a year ago

Ah that's very cool. Thankyou for contributing and teaching me about the find method.

Collectives™ on Stack Overflow

JQuery use input text to preselect dropdown box

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related