上下文:我正在使用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();
}
});
});