如何实现 Javascript 自动完成功能？答案

【问题标题】：How can I implement Javascript autocomplete functionality?如何实现 Javascript 自动完成功能？
【发布时间】：2012-08-04 10:35:45
【问题描述】：

我对编程很陌生，但在谈到 JavaScript/jQuery 时，我大部分都是新手。我在这里的原因是因为即使我已经通过互联网搜索了自动完成搜索的解决方案/我尝试应用我发现的不同版本，但我无法找到真正有效的解决方案:)

这是我的一段代码：

var mydata
$(document).ready(function () 
{
    ConstructSuggestionArray();
    $("[id$='txtSearchProject']").keypress(function () 
    {
       $("[id$='txtSearchProject']").autocomplete
            ({
                source: mydata
            })
    })
});

function ConstructSuggestionArray()
{
    $.ajax
    ({
        url: 'ProjectManagement.aspx/ConstructSuggestionArray',
        type: "POST",
        data: {},
        async: false,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) 
        {
            if (response.d != null) 
            {
                mydata = jQuery.parseJSON(response.d);
                return true;
            }
            else 
            {
                return false; 
            }
        }
    });
}

另外，我构造数组的那段代码：

public string ConstructSuggestionArray()
        {
            using (DataClassesDataContext context = new DataClassesDataContext())
            {
                List<Utils.ProjectsOfAUser> theProjects =  
                      ReturnProjectsAccordingToAllocation(context);
                string[] projectsNameArray = new string[theProjects.Count];
                int index = 0;

            foreach (Utils.ProjectsOfAUser oneProject in theProjects)
            {
                projectsNameArray[index] = oneProject.Name;
                index++;
            }

            string strJSON = string.Empty;
            JavaScriptSerializer objJSSerializer = new JavaScriptSerializer();
            strJSON = objJSSerializer.Serialize(projectsNameArray).ToString();

            return strJSON;
        }
    }
}

我还在我的项目和我的 asp.net 页面中添加了脚本。

我很困惑，如果你能帮我解决这个问题，我将非常感激。

提及：txtSearchProject - 是一个asp控件。

提前谢谢你。

【问题讨论】：

jqueryui.com/demos/autocomplete ?
如果你在你的jQuery中指定dataType: 'json'，你可能不需要调用jQuery.parseJSON()，因为你的success回调函数应该只传递一个对象，而不是一个字符串。如果响应不是有效的 JSON，则不会执行 success 回调。您可以发布 AJAX 调用的响应吗？
显然没有答案。我在我的脚本中放了一些断点（我使用的是 IE，因为我知道我无法在其他浏览器中调试），但它没有去那里。对不起你们，我假设你们听到了很多愚蠢/显而易见的问题，但如果我已经一个多星期没有尝试做我的部分研究，我不会发布它:)
安装带有firebug扩展的firefox进行调试！
ajax 调用它没有返回任何东西.. 事实上，它没有进入 ConstructSuggestionArray() 我不知道为什么..

标签： javascript jquery asp.net autocomplete

【解决方案1】：

你使用过 jquery 自动完成插件吗？它非常好用，也很容易实现请通过此链接

http://jqueryui.com/demos/autocomplete/

【讨论】：

那是我读过的第一批文档之一，但我仍然无法理解我在代码中做错了什么。谢谢你的回答。

【解决方案2】：

jQuery AJAX 方法是异步的，自动完成绑定到 null 变量，因此没有选项。然后回调运行并填充变量，但为时已晚。

你在这里有两个选择。您可以在成功回调中添加以下内容：

$("[id$='txtSearchProject']").autocomplete( "options", "source", mydata);

它会在完成后设置下拉菜单的来源（如果您需要再次调用它，这有利于更新）。

您也可以将 Construction SuggestionArray 的 url 作为源，小部件将处理调用页面（请参阅“远程数据源”的自动完成演示页面并查看源）。

【讨论】：