jQuery 自动完成选择触发事件

Question

上下文： 我正在使用 jQuery 的自动完成插件来触发它下面的显示/隐藏元素。 问题：该事件仅在输入框中输入文本时触发，而不是在从自动完成列表中选择标签时触发。

这是我的代码：

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

div #Sub_Level2 根据输入框中输入的文本显示/隐藏。

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

这可行，但是如果从自​​动完成框中选择了标签“绿色”，则显示/隐藏不起作用。它只有在输入时才有效。

当用户单击自动完成框上的标签时，如何调整此代码以触发 #Sub_Level2 div 的显示/隐藏事件。

提前致谢。

Answer 1

您需要在 jquery 自动完成选择回调函数中触发相同的 keyup 事件 .. 检查此示例 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();
         }
    });
});

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