如何在母版页中调用jquery ui autocomplete以在内容页面中定义控件

Posted 2021-03-31

我试图在aspx内容页面中定义的文本框上触发自动完成jQueryUi小部件。

我对jQuery-ui.js文件的引用位于母版页的head部分。

自动完成调用在页面底部的母版页的脚本块中进行。

我理解内容页面中定义的控件的id与输出页面中生成的id不同，因此我对控件的引用（在母版页的脚本部分中）是正确的id，因为它显示在输出页面（ctl00_Content_txtEmailAddress_txtText）。

页面加载时，我收到以下异常。任何帮助，非常感谢。

Uncaught TypeError: $(...).autocomplete is not a function 
at htmlDocument.<anonymous> (PasswordReset.aspx?r=P1.WEBGUEST&f=P1.EPR.USERPASS.VIW:376)
at fire (jquery.js:974)
at Object.fireWith [as resolveWith] (jquery.js:1084)
at Function.ready (jquery.js:406)
at HTMLDocument.DOMContentLoaded (jquery.js:83)

我已经在下面提供了内容和母版页的片段

内容页：

<p1:CustomisableTextBox ID="txtEmailAddress" runat="server" SkinID="Block" 
Mandatory="true" MandatoryValidation="true" CanDisable="false" 
CanChangeMandatory="false" />

母版：

<script type="text/javascript">
    $(document).ready(function () {
        $("#ctl00_Content_txtEmailAddress_txtText").autocomplete({
            source: 'AutocompleteHandler.ashx'
        });
    });
</script>

答案

我已经考虑了很多关于这个查询的问题，并且我发现如果没有定义自动完成，那么提供小部件的js文件肯定存在问题。我把它归结为几件事。

1. 该文件未加载
2. jquery-ui文件和jquery文件之间存在问题/冲突
3. 将jquery文件加载到浏览器中的顺序存在问题
4. 调用自动完成功能的代码块未正确放置在母版页中。

有趣的是，我尝试了上述每种方法的几种排列，最后得到了加载文件而没有错误。唯一的问题是自动完成不开火！当我完全解决这个问题时，我会再次发帖，并希望这可以帮助一个人给我带来的悲伤和浪费时间。