将 jQuery 自动完成功能放入外部 .js 文件中

Posted 2023-05-08

【中文标题】将 jQuery 自动完成功能放入外部 .js 文件中

【英文标题】：Putting jQuery Autocomplete in External .js File

【发布时间】：2021-08-20 00:49:05

【问题描述】：

我想创建一个有点通用的 jQuery 自动完成功能，我可以在我的 asp.net Web 应用程序的多个页面中使用它。当所有 jQuery 与绑定到自动完成的文本框位于同一个 aspx 页面中时，我的代码就可以工作。我想将自动完成功能放在一个单独的 .js 文件中，然后我可以从多个 aspx 页面调用该文件。我已经尝试实现这一点，但它不起作用。发生的事情是，当我打开（显示）包含 asp 文本框（用于自动完成）的 div 时，页面只是挂起我的“正在加载请稍候......”消息。我在移动到单独的 .js 文件时所做的主要更改是添加参数，以便我可以传入文本框 ID 以及 WebMethod 名称和文件。我查看了 *** 以及其他网站上的许多示例，试图找出我做错了什么，但无法确定问题所在。下面是我在 .js 文件中创建的函数的副本，以及我在 aspx 页面底部的脚本块。

这是我的 .js 文件的内容：

function InitAutoComplete(textBox, methodFile, methodName, hiddenFieldForSelectedValue)

    $(textBox).autocomplete(
    
        source: function (request, response)
        
            $.ajax(
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: methodFile + "/" + methodName,
                data: " 'searchString': '" + request.term + "', 'limit': '10' ",
                dataType: "json",
                success: function (data)
                
                    response($.map(data.d, function (item)
                    
                        /*return value: item*/
                        return
                        
                            value: item.ID,
                            label: item.Program
                        ;
                    ))
                ,
                error: function (result)
                
                    alert("No matches found!");
                
            );
        ,
        select: function (event, ui)
        
            if (ui.item)
            
                //GetCustomerDetails(ui.item.value);
                document.getElementById(hiddenFieldForSelectedValue).value = ui.item.value;
                event.preventDefault();
            
        ,
        focus: function (event, ui)
        
            event.preventDefault();
            $(this).val(ui.item.label);
        ,
        minLength: 2
    );

这是我的 aspx 页面上的脚本块：

var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null)

    prm.add_endRequest(function (sender, e)
    
        if (sender._postBackSettings.panelsToUpdate != null)
        
            InitAutoComplete("#<%=ProgramNameSearchTbx.ClientID %>", "LessonsLearned.aspx", "GetMatchingProgramNames", "<%=SearchRecordNumberHF.ClientID%>"); 
        
    );
;

$(function () 
    InitAutoComplete("#<%=ProgramNameSearchTbx.ClientID %>", "LessonsLearned.aspx", "GetMatchingProgramNames", "<%=SearchRecordNumberHF.ClientID%>"); 
);

【问题讨论】：

我没有测试过你的代码，但是如果你把InitAutoComplete函数移动到一个单独的js文件中，请确保在你的aspx中使用它之前声明了这个函数。

【参考方案1】：

不确定问题出在哪里，但我从 .js 文件中删除了该函数，并从工作的 aspx 文件中重新复制了它，进行了更改，以便我可以传入参数，现在它正在工作。下面的替换代码还包含函数定义中的原始“$(function ()”包装器。我知道缺少元素不是原始问题的原因，但我确实想指出这一点。

这是位于我的 .js 文件中的工作函数：

    function InitAutoComplete(textBox, methodFile, methodName, hiddenFieldForSelectedValue) 
    $(function () 
        $(textBox).autocomplete(
            
                source: function (request, response) 
                    $.ajax(
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: methodFile + "/" + methodName,
                        data: " 'searchString': '" + request.term + "', 'limit': '10' ",
                        dataType: "json",
                        success: function (data) 
                            response($.map(data.d, function (item) 
                                /*return value: item*/
                                return 
                                    value: item.ID,
                                    label: item.Program
                                ;
                            ))
                        ,
                        error: function (result) 
                            alert("No matches found!");
                        
                    );
                ,
                select: function (event, ui) 
                    if (ui.item) 
                        //GetCustomerDetails(ui.item.value);
                        document.getElementById("<%=SearchRecordNumberHF.ClientID%>").value = ui.item.value;
                        event.preventDefault();
                    
                ,
                focus: function (event, ui) 
                    event.preventDefault();
                    $(this).val(ui.item.label);
                ,
                minLength: 2
            );
    );