[英]Jquery-UI -AutoComplete Not Working With BootBox Modal
Iam in a trouble by creating an ' Auto Complete Text Field ' in BootBox Modal.It does not showing any response when i search a keyword but works perfectly in normal pages(without modal). 通过在BootBox Modal中创建一个“ 自动完成的文本字段 ”,我陷入了麻烦。当我搜索关键字时,它不会显示任何响应,但是在普通页面(无模式)中可以完美显示。 This is the script which i used to call a bootbox modal alongwith autocomplete function.
这是我用来调用引导箱模式以及自动完成功能的脚本。
<script>
$("#bootbox-options-general").on('click', function() {
bootbox.dialog({
message : $("#myModalGeneral").html(),
title : "Edit Job General",
className : "modal-darkorange",
});
});
var availableTags = ["ActionScript","AppleScript","Scala"];
$( "#country" ).autocomplete({
source: availableTags,
appendTo:$("#myModalGeneral"),
});
</script>
and Here is my 'MyBootBoxMoadal.html' 这是我的“ MyBootBoxMoadal.html”
<div id="myModalGeneral" style="display: none;">
<div class="row">
<form method="POST" action="edit_job_info id="myForm3">
<div class="form-group">
<input type="text" id="country" class="form-control"/>
</div>
</form>
</div>
I had reffered a fiddle https://jsfiddle.net/sv9L7cnr/ which is working perfectly , but sadly it does not working with my bootbox .So is there any solution to make a AutoComplete TextField in bootbox modal.Working solutions will be appreciated.Thank You 我推荐了一个小提琴https://jsfiddle.net/sv9L7cnr/ ,它可以正常工作,但不幸的是它不能与我的启动箱一起使用。谢谢
You have to call the autocomplete after the bootbox is loaded. 加载引导箱后,必须调用自动完成功能。 Try this:
尝试这个:
html html
<div id="myModalGeneral" style="display: none;">
<div class="row">
<div class="col-md-6">
<form method="POST" action="edit_job_info" id="myForm3">
<div class="form-group">
<input autocomplete="off" type="text" id="country" class="form-control country"/>
</div>
</form>
</div>
</div>
</div>
<button id="bootbox-options-general">Click</button>
css 的CSS
.ui-autocomplete{
z-index: 1065;
}
js js
$("#bootbox-options-general").on('click', function() {
var box = bootbox.dialog({
message : $("#myModalGeneral").html(),
title : "Edit Job General",
className : "modal-darkorange"
});
box.bind('shown.bs.modal', function(){
var availableTags = ["ActionScript","AppleScript","Scala"];
$( ".country" ).autocomplete({
source: availableTags
});
});
});
The DatePicker DIV DatePicker DIV
<div class="col-sm-6">
<label>MBL Date</label>
<div class="input-group">
<form:input path="mblOrMawbDate"
class="form-control date-picker" placeholder="Choose Date" id="date-picker" data-date-format="dd-mm-yyyy"
value="${job.mblOrMawbDateString}" />
<span class="input-group-addon"> <i class="fa fa-calendar"> </i></span>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.