jQuery Autocomplete Select Trigger Event

Question

Context: I'm using jQuery's autocomplete plugin to trigger a show/hide element beneath it. Problem: The event is only triggered when text is typed in the input box, and not when the tag is selected from the autocomplete list.

This is my code:

    <input name="Category" id="tags">
    <br>
    <div id="Sub_Level2">
        Sub Category
        <select name="SubCategory" required>
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
        </select>
    </div>

The div #Sub_Level2 is shown/hidden according to the text entered inside the input box.

 $('input[name=Category]').keyup(function () {
        if ($(this).val() == "Green")
            $('#Sub_Level2').show();
        else
            $('#Sub_Level2').hide();
    });

This works, however is the tag 'Green' is selected from the autocomplete box, the show/hide does not work. It only works when it is typed in.

How do I adjust this code to trigger the show/hide event of the #Sub_Level2 div when the user clicks a tag on the autocomplete box.

Thanks in advance.

kamesh · Accepted Answer · 2016-10-07 09:21:34Z

2

You need to trigger the same keyup event in jquery autocomplete select callback function .. check this example FIDDLE:https://jsfiddle.net/kameeshwaran/m96nseh4/3/

$(document).ready(function(){
  $('input[name=Category]').keyup(function () {
        if ($(this).val() == "Green")
            $('#Sub_Level2').show();
        else
            $('#Sub_Level2').hide();
    });

    $( "#tags" ).autocomplete({
        select: function( event, ui ) {
          $("input[name=Category]").val(ui.item.value);
          $('input[name=Category]').keyup();
         }
    });
});

edited Oct 7, 2016 at 9:21

answered Oct 7, 2016 at 7:04

kamesh

2,4343 gold badges28 silver badges33 bronze badges

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

2 Comments

kamesh Over a year ago

check keyup event is triggering properly or not

kamesh Over a year ago

create one fiddle and share zayn

Harshal Sharma · Accepted Answer · 2016-10-07 09:30:02Z

0

    $(document).ready(function() {
      $("#tags").autocomplete({
        select: function(event, ui) {            

          if (ui.item.value == "Green")
          $('#Sub_Level2').show();
        else
          $('#Sub_Level2').hide();
        }
      });
    });

    $(function() {
      var availableTags = ["Green", "Blue"];

      $("#tags").autocomplete({
        source: availableTags
      });
    });

edited Oct 7, 2016 at 9:30

answered Oct 7, 2016 at 7:03

Harshal Sharma

645 bronze badges

Collectives™ on Stack Overflow

jQuery Autocomplete Select Trigger Event

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related