javascript - 强制自动完成依赖于其他人的结果

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。

;)