当用户在文本框外单击时隐藏自动完成列表未按预期工作

Question

当用户在文本框中键入某些字符时，我试图显示自动完成列表。我有 3 个具有自动完成功能的文本框。当用户单击文本框外的其他位置或按键盘上的 esc 按钮时，我试图隐藏自动完成列表。例如，当用户在文本框中键入某个字符 (A) 时，它会显示用户可以从中选择的自动完成列表文本，但如果用户不想从自动完成中选择任何文本并单击文本框或 esc 按钮之外的某个位置，它应该隐藏/删除我的代码失败的自动完成列表。

演示：http://plnkr.co/edit/0qynmbgjob7rp94PUaIR?p=preview

下面的代码没有按预期工作：

  #country1:not(:focus) + .list-group {
    display: none;  
}
#country2:not(:focus) + .list-group {
    display: none;  
}
#country3:not(:focus) + .list-group {
    display: none;  
}

Answer 1

您的 HTML 中没有 country1 元素。所以，在你的 css 中将 country1 更改为 country：

#country: not(: focus) + .list - group {
    display: none;
}