如何使 jQuery UI 自动完成，以便当用户开始输入其他内容时进入模态？

【问题标题】：How to make jQuery UI Autocomplete so that when users starts typing other content goes modal?如何使 jQuery UI 自动完成，以便当用户开始输入其他内容时进入模态？
【发布时间】：2020-08-16 23:23:09
【问题描述】：

我希望当用户开始使用 jquery UI 自动完成（元素获得焦点，或用户开始键入）时，其他内容（自动完成显示的元素之外）看起来像在模式窗口下。

当元素失去焦点时，自动完成器之外的其他元素应该看起来正常。

TripAdvisor 使用了类似的行为（此时），您可以在 TripAdvisor 网站上看到，当用户开始在搜索框中输入内容时，其他内容看起来像是在模态窗口后面。

如何使用 jqueryUI 来实现？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案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/

【讨论】：