[英]jquery ui 's autocomplete not working inside form wizard
I'm using jquery steps as a form wizard and I need to implement the autocomplete of jquery UI in a field inside the form wizard, but the autocomplete is not working, when I put the field out of the form, it works, this is the code that I use 我将jquery步骤用作表单向导,我需要在表单向导内的字段中实现jquery UI的自动完成功能,但是自动完成功能不起作用,当我将字段从表单中取出时,它可以正常工作,这是我使用的代码
<script>
$(function (){
var availableTags = [""];
$("#wizard").on('keyup','.tags',function () {
$.post('LinkingPages', {Request : 'GetAirports',StartWith : $(this).val()}, function(data) {
var Tab = data.split(";");
var i;
for (i = 0; i < Tab.length; i++) {
availableTags[i] = Tab[i];
}
for (var j = i; j < availableTags.length; j++) {
availableTags[j]="";
}
},"text");
});
$('.tags').autocomplete({
open: function() {alert("Hello");},
source : availableTags
});
$("#wizard").steps({
headerTag: "h3",
bodyTag: "span",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
onStepChanging: function (event, currentIndex, newIndex)
{
$("#SendReqForm").validate().settings.ignore = ":disabled,:hidden";
return $("#SendReqForm").valid();
},
onFinishing: function (event, currentIndex)
{
$("#SendReqForm").validate().settings.ignore = ":disabled";
return $("#SendReqForm").valid();
},
onFinished: function (event, currentIndex)
{
$("#SendReqForm").submit();
}
});
function errorPlacement(error, element)
{
element.before(error);
}
$("#SendReqForm").validate({
//errorLabelContainer: '#errors',
errorPlacement: errorPlacement,
rules: {
Co_Password: {
equalTo: "#password"
},
Co_Email: {
equalToEmail: "#Email"
},
Password:{
pwdComp:true
}
}
});
jQuery.validator.addMethod("pwdComp", function(input,element, param) {
var reg = /^[^%\s]{6,}$/;
var reg2 = /[a-zA-Z]/;
var reg3 = /[0-9]/;
return reg.test(input) && reg2.test(input) && reg3.test(input);
},
jQuery.validator.format("For security reasons passwords must include a capital letter, small letter, number and be more than 6 characters."));
});
</script>
我将自动完成代码放在jquery步骤的代码之后,它可以正常工作
Declare Jquery steps configuration before the autocomplete. 在自动完成之前声明Jquery步骤配置。 This works for me: 这对我有用:
HTML 的HTML
<form id="example-form" action="#">
<div>
<h3>@Resources.Filter</h3>
<section>
<div class="row">
<div class="col-md-12">
<div class="col-md-12">
<input type="text" style="margin: 15px 0px; font-size: 16px; color: #777; text-transform: uppercase;" class="form-control" id="academiaInput" placeholder="@Resources.TypeSearchForGym..." />
</div>
</div>
</div>
</section>
<h3>Profile</h3>
<section>
</section>
<h3>Hints</h3>
<section>
</section>
<h3>Finish</h3>
<section>
</section>
</div>
</form>
Javascript Java脚本
$(document).ready(function () {
var form = $("#example-form");
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
$("#academiaInput").autocomplete({
minLength: 1,
source: function (request, response) {
$.ajax({
MY AJAX TO AUTOCOMPLETE
})
},
select: function (event, ui) {
event.preventDefault();
$("#academiaInput").val(ui.item.label);
},
change: function (event, ui) {
}
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.