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

Question

我对编程很陌生，但是其中大部分是关于JavaScript / jQuery的新知识。 我在这里的原因是因为即使我已经通过Internet搜索了用于自动完成搜索的解决方案/我尝试应用所发现内容的不同版本，但我无法找到真正可行的解决方案：）

这是我的代码：

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控件。

先感谢您。

Answer 1

您是否使用过jQuery autocomplete插件，它非常好且易于实现，请通过此链接

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

Answer 2

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

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

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

一旦完成，它将为下拉菜单设置来源（如果需要再次调用，则具有更新的好处）。

您还可以将URL作为源提供给ConstructSuggestionArray，小部件将处理调用页面（请参见自动完成演示页面的“远程数据源”并查看源）。