JQuery теги ввода автозаполнения не работает в модале начальной загрузки

Question

Я создаю автозаполнение поиска тегов в модале начальной загрузки.Я использую следующую библиотеку jquery: https://github.com/underovsky/jquery-tagsinput-revisited Поиск автозаполнения работает, когда текстовое поле ввода не находится в модале начальной загрузки.Но когда я реализую его в модале начальной загрузки, работает только создание тегов.Когда пользователь печатает, автозаполнение больше не отображается.Кто-нибудь, кто может мне помочь?

<script>

$(document).ready(function () {
    $('#form-auto-search').tagsInput({
        'autocomplete': {
            source: [
                'y@x.be',
                'z@x.be',
                'g@x.be',
                'v2@x.be'
            ]
        } 
    });
});
</script>


<div class="modal fade" id="invitationmodal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="invitationModalLabel">
        <br/>
        <bean:message key="purecloud.invitation.header" locale="locale"/>
        <br/>
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form enctype="multipart/form-data" action="" method="post" class="form-horizontal">
        <div class="modal-body">
          <div class="form-group">
            <div class="modal-body">

                  <div class="form-group">
                  <small id="emailHelp" class="form-text text-muted"><bean:message key="purecloud.lblEmail" locale="locale"/></small>
                    <input id="form-auto-search" name="form-auto-search" class="tagsinput"  type="text" value="">
                  <br/>
                    <div class="form-check">
                        <label class="form-check-label">
                        <input type="radio" class="form-check-input" name="optionsRadios" id="optionsAllUsers" value="option1">
                            <p style="margin-top:2px;"><bean:message key="purecloud.invitation.sendall" locale="locale"/></p>
                        </label>
                    </div>
                    <small id="emailHelp" class="form-text text-muted"><p><bean:message key="purecloud.invitation.body" locale="locale"/></p></small>
                            <textarea id="editor1" name="editor1"></textarea>
                    </div>
              </div>
          </div>
        </div>
        <div class="modal-footer">
              <div class="w-100">
                <button type="button" class="btn btn-primary" id="sendInvitation"><bean:message key="purecloud.modal.lblsend" locale="locale"/></button>
               <button type="button" class="btn btn-link" data-dismiss="modal"><bean:message key="purecloud.modal.lblcancel" locale="locale"/></button>
              </div>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

Я наткнулся на ту же проблему.Это на самом деле связано с JqueryUI CSS и начальной загрузкой, которые имеют несовместимые z-index.Короче говоря, модальное окно выше z-индекса автозаполнения.

Вам нужно исправить это вручную.Попробуйте следующее css:

.ui-autocomplete {
    position: absolute;
    z-index: 100000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
    padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
    background-color: #DDD;
}
.ui-helper-hidden-accessible {
    display: none;
}