Question

我正在bootstrap模式中创建自动完成标记搜索。我正在使用以下jquery库：https://github.com/underovsky/jquery-tagsinput-revisited 当输入文本框不在引导模式中时，自动完成搜索有效。但是当我在bootstrap模式中实现它时，只有标签创建才有效。当用户键入时，不再显示自动完成功能。谁可以帮助我？

<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

我偶然发现了同样的问题。它实际上与具有不兼容z-index的JqueryUI css和bootstrap有关。长话短说，模态窗口比自动完成z-index高。

您需要手动修复此问题。尝试以下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;
}

Jquery tagsinput autocomplete在引导模式中不起作用

1 个答案: