jQuery-ui 自动完成在母版页上找不到控件答案

【问题标题】：jQuery-ui Autocomplete not finding control on Master pagejQuery-ui 自动完成在母版页上找不到控件
【发布时间】：2023-03-21 00:11:01
【问题描述】：

我正在为母版页上的 jQuery-UI 自动完成而苦苦挣扎。
我已经在母版页的头部按顺序加载了 jQuery.js 和 jQuery-ui.js。
我需要做的事情很常见，我敢肯定，但也许它在母版页上的想法妨碍了。
这是<body> 代码，它将使用 ajax 调用之外的硬编码值填充自动完成输入 (id=autocomplete)。
我意识到调用 ajax 获取数据而不使用它是没有用的，但我稍后会处理这个问题……小步骤

<%-- Trying some autocomplete stuff --%>
<label for="autocomplete" style="color:yellow;">Language: </label>
<input id="autocomplete" />

<script type="text/javascript">
    var wsUrl = '<%= ResolveUrl("http://localhost/CommonContent/CCWebService.asmx/HelloWorld") %>';
    var fillMe = "[id$='autocomplete']";
    $.ajax({
        type: "POST",
        url: wsUrl,
        contentType: "application/json; charset=utf-8",
        dataType: "text",
        success: function (dave) {
            alert(dave);
            //FillAutocomplete(fillMe);
       },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("1!\n" + errorThrown + "\n" + jqXHR + "\n" + textStatus);
        }
    });
    FillAutocomplete(fillMe);
    function FillAutocomplete(id) {
        autodata = ["c++-001", "java-002", "php-003", "coldfusion-004", "javascript-005", "asp-006", "ruby-007"];
        alert(autodata);
        //$("[id$='autocomplete']").autocomplete({
        $(id).autocomplete({
                source: autodata,
            select: function (event, ui) {
                var label = ui.item.label.split('-')[0];
                alert(label);
                var value = ui.item.value.split('-')[1];
                alert(value);
                //store in session
                document.valueSelectedForAutocomplete = value
            }
        });
        alert("Filled");
    }
</script>

同样，这可以工作（但数据是硬编码的）。我按以下顺序收到警报：ajax 成功，然后是 autodata，然后是填充通知。
此外，如果我使用设置为“#autocomplete”的 fillMe 变量，或者我在 FillAutocomplete 函数中对其进行硬编码，它也可以工作。
显然，由于它有效，输入能够具有自动完成属性。

这是我尝试过的所有其他地方，我只是得到对象不支持“自动完成”属性或方法

将自动完成代码直接放入success中
调用自动补全INSIDE ajax调用成功（取消注释//FillAutocomplete）（注释其他调用）
以$(function() { $('#autocomplete).autcomplete({...开头
使用某种形式的<#='autocomplete.ClientID()'#>

我有一个偷偷摸摸的怀疑它没有找到控件，并不是说控件没有支持它。

有什么想法吗？

更新：更多信息 我添加了下面的屏幕截图，以充分展示错误。很抱歉重复自己，但我想知道这是否是由于母版页，或者在调用自动完成方法之前 jquery-ui 没有加载（因为它是“对象不支持....”）

原因及解决方法：

似乎 Ajax 调用试图在远程文件 jQuery-UI 加载之前完成。正如 RAM 在下面的 cmets 中所建议的，我下载了所有远程文件，它们现在是项目的一部分。现在脚本以正确的顺序加载，并且自动完成方法在输入中可用。感谢RAM。

【问题讨论】：

标签： javascript jquery ajax jquery-ui autocomplete

【解决方案1】：

这是一个如何在 asp.net 中使用 jquery 自动完成功能的示例 http://www.dotnetlearners.com/blogs/view/102/JQuery-ajax-autocomplete-extender-textbox-using-json-response-type.aspx

【讨论】：

不，仍然得到对象不支持属性或方法'自动完成'
它正在“查找”控件，因为当我将 '("autocomplete").autocomplete' 更改为 '("bill").autocomplete' 时出现编译错误。
您在哪里添加了 jquery-ui 参考？在 jquery.js 引用之后添加它。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
将jquery js文件下载到本地，放到你的项目中，在你的页面本地引用。

【解决方案2】：

Ajax 调用试图在远程文件 jQuery-UI 加载之前完成。正如 cmets 中建议的 RAM，我下载了所有远程文件，它们是项目的一部分。现在脚本以正确的顺序加载，并且自动完成方法在输入中可用。

感谢 RAM - 成功了。

【讨论】：