如何實現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，小部件將處理調用頁面（請參見自動完成演示頁面的“遠程數據源”並查看源）。