jQuery Autocomplete Select Trigger Event

Question

Контекст: Я использую плагин автозаполнения jQuery, чтобы вызвать элемент show/hide под ним. Проблема: Событие запускается только при вводе текста в поле ввода, а не при выборе тега из списка автозаполнения.

Это мой код:

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

ДИВ # Sub_Level2 показан/скрыт в соответствии с текстом, введенным в поле ввода.

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

Это работает, однако тэг «Green» выбран из поля автозаполнения, показать/скрыть не работает. Он работает только при вводе.

Как настроить этот код, чтобы вызвать событие show/hide в элементе # Sub_Level2, когда пользователь нажимает тег в поле автозаполнения.

Заранее спасибо.

Answer 1

Вы должны вызвать тот же KeyUp событие в JQuery автозаполнения функции обратного вызова выберите .. проверить этот пример скрипку: 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(); 
     } 
    }); 
}); 

Answer 2

$(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 
     }); 
    });