Question

我正在尝试使用两个自动完成文本框，第二个文本框依赖于第一个输入的任何值。

完全自动完成：

 <script>
    var stateId = 0;
        $(document).ready(function () {
            $.ajax({
                dataType: "json",
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                url: '/api/services/app/generics/StateList',
                cache: true,
                success: function (data) {
                    var array = $.map(data.result, function (item) {
                        return {
                            label: item.stateName,
                            value: item.id
                        }
                    });
                    $("#StateName").autocomplete({
                        source: array,
                        minLength: 1,
                        change: function (event, ui) {
                            if (!ui.item) {

                                event.preventDefault();
                                $("#StateName").val("");
                            }},
                        open: function () {

                        },
                        close: function () {
                        },
                        focus: function (event, ui) {
                            return false;
                        },
                        select: function (event, ui) {

                            event.preventDefault();
                            $("#StateName").val(ui.item.label);
                                stateId = ui.item.id;
                        },
                        }
                    );
                },
                error: function (data) {

                }
            });
        });
        $(document).ready(function () {
            $.ajax({
                dataType: "json",
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                url: '/api/services/app/generics/CityList/' + stateId,
                cache: true,
                success: function (data) {
                    var array = $.map(data.result, function (item) {
                        return {
                            label: item.cityName,
                            value: item.id
                        }
                    });
                    $("#CityName").autocomplete({
                        source: array,
                        minLength: 1,
                        change: function (event, ui) {
                            if (!ui.item) {

                                event.preventDefault();
                                $("#CityName").val("");
                            }},
                        open: function () {

                        },
                        close: function () {
                        },
                        focus: function (event, ui) {
                            return false;
                        },
                        select: function (event, ui) {

                            event.preventDefault();
                            $("#CityName").val(ui.item.label);
                        },
                        }
                    );
                },
                error: function (data) {

                }
            });
        });
</script>

基本上，根据第一个文本框的值，应显示第二个文本框的值。说佛罗里达被选中，当有人搜索时，佛罗里达城市的名字应出现在第二个。我完全不知道我该怎么做。 Javascript不是我的强项。任何帮助都会很棒！

编辑：这是我最终确定的工作脚本，万一有人像我一样受苦！

<script>
        $(document).ready(function () {
            $.ajax({
                dataType: "json",
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                url: '/api/services/app/generics/StateList',
                cache: true,
                success: function (data) {
                    var array = $.map(data.result, function (item) {
                        return {
                            label: item.stateName,
                            value: item.id
                        }
                    });
                    $("#StateName").autocomplete({
                        source: array,
                        minLength: 1,
                        change: function (event, ui) {
                            if (!ui.item) {

                                event.preventDefault();
                                $("#StateName").val("");
                            }},
                        open: function () {

                        },
                        close: function () {
                        },
                        focus: function (event, ui) {
                            return false;
                        },
                        select: function (event, ui) {

                            event.preventDefault();
                            $("#StateName").val(ui.item.label);
                            $(function () {
                                $("#CityName").autocomplete({
                                    delay: 100,
                                    minLength: 2,
                                    cache: true,
                                    source: function (request, response) {
                                        $.post("/api/services/app/generics/GetCityByState?stateId=" + ui.item.value, function (data) {
                                            // data is an array of objects and must be transformed for autocomplete to use
                                            var array = data.error ? [] : $.map(data.result, function (m) {
                                                return {
                                                    label: m.cityName,
                                                    value: m.id
                                                };
                                            });
                                            response(array);

                                        });
                                    },
                                    focus: function (event, ui) {
                                        return false;

                                    },
                                    select: function (event, ui) {
                                        event.preventDefault();
                                        $("#CityName").val(ui.item.label);
                                    }
                                });
                            });
                        },
                        }
                    );
                },
                error: function (data) {

                }
            });
        });

Answer 1

事情就是你打电话给两个$(document).ready(function () {期待第二个人在第一个之后执行“......”不是这样的。必须“等待”用户输入。

我还没有密切检查你的代码但只是在问题中...谎言逻辑主。

我会在没有Ajax的情况下填写第一个选择页面加载。

就像那样...除非状态选择选项依赖于其他先前的值然后，状态选择的onchange→触发Ajax调用以填充城市名称select。

）

强制自动完成依赖于另一个人的结果

1 个答案: