如何使 jQuery UI 自动完成，以便当用户开始输入其他内容时进入模态？
Posted
技术标签:
【中文标题】如何使 jQuery UI 自动完成，以便当用户开始输入其他内容时进入模态？【英文标题】：How to make jQuery UI Autocomplete so that when users starts typing other content goes modal? 【发布时间】：2020-08-16 23:23:09 【问题描述】：我希望当用户开始使用 jquery UI 自动完成（元素获得焦点，或用户开始键入）时，其他内容（自动完成显示的元素之外）看起来像在模式窗口下。
当元素失去焦点时，自动完成器之外的其他元素应该看起来正常。
TripAdvisor 使用了类似的行为（此时），您可以在 TripAdvisor 网站上看到，当用户开始在搜索框中输入内容时，其他内容看起来像是在模态窗口后面。
如何使用 jqueryUI 来实现？
【问题讨论】：
【参考方案1】：我设法通过以下方式执行此功能：
CSS
#modal-background
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #aaa; /* white */
filter: alpha(opacity=20);
opacity: .20;
-webkit-opacity: .2;
-moz-opacity: .2;
z-index: 10; /* 1000 */
#modal-background.active
display: block;
HTML
放
<div id="modal-background"></div>
<body> 标签之后
自动完成 JS 代码：
jQuery('#your_autocomplete').autocomplete(
...
open: function(event, ui)
$("#modal-background").addClass("active");
,
close: function(event, ui)
$("#modal-background").removeClass("active");
,
...
JSFiddle：
http://jsfiddle.net/adamovic/f4we9dbo/
【讨论】：
以上是关于如何使 jQuery UI 自动完成，以便当用户开始输入其他内容时进入模态？的主要内容，如果未能解决你的问题，请参考以下文章
如果有图像，如何捕获 jquery ui 自动完成的选择事件？