Jquery自动完成框并不总是有效答案

【问题标题】：Jquery autocompletebox doesn't always workJquery自动完成框并不总是有效
【发布时间】：2018-06-05 14:16:21
【问题描述】：

我在模式窗口中遇到了 jquery 自动完成框的问题。我会尝试将这种情况解释为尽可能清楚。如果您有任何问题，请告诉我。

我有一个包含所有字段的屏幕，它是一个主要记录。我也有一组子记录。我希望用户使用子记录的模式对话框将信息添加到子记录中。子记录中的字段之一是“货币”字段。该字段应该是一个自动完成框。这个问题很简单，但两天后我仍然不知道如何解决它。用户第一次按下添加按钮时，模态窗口会完美打开。自动完成框也很有魅力。但是当用户保存第一个孩子并想通过按下添加按钮来添加第二个孩子时，模式窗口会再次打开。但后来我收到错误“Uncaught TypeError: $(...).autocomplete is not a function”，我不知道为什么第一次一切正常，但为什么第二次出现这个错误向上。

代码：

打开模态窗口：

<a href="#theModal" class="nav-link btn btn-info float-right" data- 
remote="/Specification/_AddSpecification" data-toggle="modal" data- 
backdrop="static" data-target="#theModal"> Nieuwe specificatie</a>

对于自动完成框（我为此使用了一个类）

<script>
        $(document).ready(function () {
            $(document).on('focus',
                '.CurrencySelect',
                function () {
                    $(this).autocomplete({
                        source: function (request, response) {
                            $.ajax({
                                url: "/Currency/searchCurrencies",
                                type: "POST",
                                dataType: "json",
                                data: { searchValue: request.term },
                                success: function (data) {
                                    //alert(JSON.stringify(data));
                                    response($.map(data,
                                        function (item) {
                                            return { label: item.currency.Name, value: item.currency.Id };
                                        }));
                                }
                            });
                        },

                        select: function (event, ui) {
                            //alert(this.id);
                            var idField = this.id.replace('String', '');
                            //alert(idField);
                            $("input[name=" + idField + "]").val(ui.item.value);
                            $("input[name=" + this.id + "]").val(ui.item.label);

                            // retrieve the exchange rate from the selected currency for the specified declarationDate.
                            $.ajax({
                                url: "/Currency/getExchangeRate",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    currencyId: ui.item.value,
                                    date: $("#date").val()
                                },
                                success: function (data) {
                                    //alert(JSON.stringify(data));

                                    // Check if status = success
                                    if (data.status === "success") {

                                        // check if statusmessage = null
                                        if (data.statusmessage == null) {
                                            // Disablen van het veld ExchangeRate.
                                            $("#ExchangeRateReadOnly").attr("disabled", "disabled");

                                            // Vullen van het veld ExchangeRate via een variabele.
                                            var er = data.Value;
                                            $("#ExchangeRateReadOnly").val(er.toString().replace(/\./g, ','));
                                            $("#ExchangeRate").val(er.toString().replace(/\./g, ','));
                                            convertCurrencyToEuro();

                                        } else if (data.statusmessage === "Exchangerate unknown") {
                                            alert(
                                                "Voor de geselecteerde valuta is geen geldige koers bekend. U dient deze zelf op te voeren.");
                                            $('#ExchangeRateReadOnly').prop("disabled", false);
                                            convertCurrencyToEuro();

                                        } else if (data.statusmessage === "No exchangerate needed") {
                                            alert("Er is geen koers nodig voor de geselecteerde valuta.");

                                            $("#ExchangeRateReadOnly").attr("disabled", "disabled");
                                            convertCurrencyToEuro();
                                        } else if (data.statusmessage === "Invalid currency code") {
                                            alert("Er is geen geldige valuta geselecteerd.");
                                            convertCurrencyToEuro();
                                        }
                                    }
                                }
                            });

                            return false;
                        }
                    });
                });
        });
    </script>

我希望有人可以帮助我解决这个问题。

请指教，

凯文

【问题讨论】：

当您再次加载窗口时，jquery 似乎无法识别。您是否尝试过调试它并查看发生了什么？
@Nilesh 我尝试调试，但在第二次打开模式窗口时无法识别 jquery 时，我看不到任何奇怪的地方。我发现它只有在保存第一个子记录后才会发生。如果我打开模型，填写所有字段，然后按取消（放弃任何更改并关闭模式）并重新打开表单，自动完成框仍然可以正常工作。保存更改并重新打开模式后，我再次遇到相同的错误。

标签： javascript c# jquery asp.net-mvc autocompletebox

【解决方案1】：

我刚刚解决了这个问题。多么愚蠢，jquery 被加载了两次。一次在 _layout 页面中，一次在父子记录本身的页面中。从父子页面中删除它后，现在一切似乎都像魅力一样工作。

感谢您的帮助！

【讨论】：