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

时间:2012-08-07 12:02:03

标签: javascript jquery asp.net autocomplete

我对编程很陌生,但大部分时间我都是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控件。

提前谢谢。

2 个答案:

答案 0 :(得分:1)

你使用过jquery autocomplete插件吗,它非常好用且易于实现 请通过此链接

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

答案 1 :(得分:0)

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

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

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

一旦完成,下拉菜单的来源就会设置(如果你需要再次调用,这有更新的好处)。

您还可以将ConsligSuggestionArray的url作为源,窗口小部件将处理调用页面(请参阅“远程数据源”的自动完成演示页面并查看源代码。)