Question

我正在使用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>

Answer 1

我把自动完成代码放在jquery步骤的代码之后，它运行正常

Answer 2

在自动完成之前声明Jquery步骤配置。这对我有用：

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

$(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) {

        }
    })
})

jquery ui的自动完成功能无法在表单向导中运行

2 个答案: