上下文:我正在使用jQuery的autocomplete插件来触发其下面的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>


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

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


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

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

提前致谢。

最佳答案

您需要在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();
         }
    });
});

07-24 09:44
查看更多