使用 AJAX AutoCompleteExtender 进行自动建议
4.84/5 (13投票s)
使用 Ajax AutoCompleteExtender 实现一个简单的自动建议功能。
引言
在当前场景中，我们需要文本框更易于使用，因此自动建议是一个使其更易于使用的功能。此外，拼写错误的可能性也降低了。本文将帮助您使用 AJAX AutoCompleteExtender 添加一个简单的自动建议功能。
背景
使用服务从数据库调用数据。此自动建议将根据您输入的字母填充前十条记录。例如，如果我们输入“A”，则会填充以字母“A”开头的十条记录，然后我们输入“An”，则会填充以“An”开头的十条记录。
Using the Code
代码正在为一家公司填充自动建议。我们需要从服务中获取公司名称及其 ID。因此，这是我们在服务中编写的方法，用于获取以用户在 TextBox 中输入的文本开头的十家公司。
服务的名称是“CompanyServiceForAutoSuggest”，其中包含方法 GetCompanyList，该方法包含两个参数
- “
prefixText”是要搜索以填充自动建议的文本 - “
count”是自动建议中的最大记录数
该方法返回一个 string 数组，其中包含公司名称及其 ID。
[WebMethod]
public String[] GetCompanyList(String prefixText, Int32 count)
{
String[] strList = null;
List<companymasterbo> objCompanyList = new List<companymasterbo>();
List<string> strCompanyList = new List<string>();
short i;
UtilityServiceClient lObjUtilityServiceClient = null;
CompanyMasterBO lObjCompanyMasterBO = null;
lObjCompanyMasterBO = new ARGI.Vulcan.ServiceLayer.UtilityService.CompanyMasterBO();
lObjCompanyMasterBO.Company = prefixText.Replace("'","''").ToString().Trim();
lObjCompanyMasterBO.Count = count;
try
{
lObjUtilityServiceClient = new UtilityServiceClient();
objCompanyList = lObjUtilityServiceClient.GetCompanyList
(lObjCompanyMasterBO);// Method to get top 10 company from database
/* This is my query to get the records
@sql varchar(4000)
set @sql = 'SELECT top ' + convert(varchar(10),@p_Count) +
' comCompanyMasterID,comCompanyName
from dbo.[CompanyMaster] where comCompanyName LIKE
'''+@p_CompanyFirstName+'%'''
exec (@sql) */
if (objCompanyList.Count > 0)
{
for (i = 0; i < objCompanyList.Count; i++)
{
strCompanyList.Add(AjaxControlToolkit.AutoCompleteExtender.
CreateAutoCompleteItem(objCompanyList[i].Company, Convert.ToString(
objCompanyList[i].CompanyMasterID.ToString())));
}
strList = new String[10];
strList = strCompanyList.ToArray();
}
else
{
//strList = new String[1];
//strList[0] = "No Match Found";
}
}
catch (System.ServiceModel.FaultException FaultExp)
{
throw;
}
catch (Exception ex)
{
throw;
}
finally
{
if (lObjUtilityServiceClient != null)
lObjUtilityServiceClient = null;
if (lObjCompanyMasterBO != null)
lObjCompanyMasterBO = null;
}
return strList;
}
我创建了一个控件，因为它需要在许多位置放置。我的控件名称是 ucCompany。
在 ucCompany.ascx 页面上，编写以下行
<asp:TextBox ID="txtAutoCompleteforCompany"
name="txtAutoCompleteforCompany" runat="server"
onblur="showMessage()" autocomplete="off"></asp:TextBox>
<ajaxtoolkit:TextBoxWatermarkExtender
ID="txtAutoCompleteforCompany_waterMark" runat="server"
TargetControlID="txtAutoCompleteforCompany"
WatermarkText="Add New Company..."Enabled="true">
</ajaxtoolkit:TextBoxWatermarkExtender>
<div id="listPlacement" class="cls_listPlacement"></div>
<ajaxtoolkit:AutoCompleteExtender ID="txtAutoCompleteforCompany_AutoCompleteExtender"
MinimumPrefixLength="1" TargetControlID="txtAutoCompleteforCompany"
CompletionSetCount="10"CompletionInterval="100"
ServiceMethod="GetCompanyList"
ServicePath="../UiHelper/CompanyServiceForAutoSuggest.asmx"
runat="server" OnClientItemSelected="setCompanyMasterID"
CompletionListElementID="listPlacement">
</ajaxtoolkit:AutoCompleteExtender>
<input type="hidden" id="hdnCompanyMasterId"
name="hdnCompanyMasterId" runat="server" value="0" />
<input type="hidden" id="hdnCompanyName"
name="hdnCompanyName" runat="server" value="" />
ServicePath 是保存我的服务的实际路径。因此，我的服务将在此处被调用。TargetControlID 是自动建议将显示其结果的控件的名称。OnClientItemSelected 我们正在调用一个名为“SetCompanyMasterID”的 JS 函数，通过这种方法，我将 ID 和 Name 设置在一个隐藏变量中，以便在需要时使用它们。
在 ucCompany.ascx 中添加 script 标签并定义 js 函数
<script type="text/javascript">
function setCompanyMasterID(source, eventargs)
{
document.getElementById ("hdnCompanyMasterId.ClientID").value =
eventargs.get_value();
document.getElementById ("hdnCompanyName.ClientID").value =
document.getElementById ("txtAutoCompleteforCompany.ClientID").value;
}
</script>
在 ucCompany.ascx.cs 文件中，我们正在创建两种方法
- "
GetCompanyMasterId" 用于获取公司 ID - "
GetCompanyName" 用于获取公司名称
public int GetCompanyMasterId()
{
try
{
if (hdnCompanyMasterId.Value.Trim() != String.Empty &&
hdnCompanyMasterId.Value.Trim() != "0")
{
if (hdnCompanyName.Value.Trim() ==
txtAutoCompleteforCompany.Text.Trim())
{
return Convert.ToInt32(hdnCompanyMasterId.Value);
}
else
{
return 0;
}
}
else
{
return 0;
}
}
catch
{
throw;
}
finally
{
}
}
public string GetCompanyName()
{
try
{
if (txtAutoCompleteforCompany.Text.Trim() != String.Empty)
{
return txtAutoCompleteforCompany.Text.Trim();
}
else
{
return string.Empty;
}
}
catch
{
throw;
}
finally
{
}
}
我的控件放置在另一个控件内部。因此，我在回发后丢失了 ID 和 Name 的值。因此，我在服务器端编写了我的 JS 方法，如果页面加载发生，我会强制调用我的 JS 方法。如果您直接使用此控件，则不需要此步骤。
protected void Page_Load(object sender, EventArgs e)
{
RegisterClientScript();
}
public void RegisterClientScript()
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=\"text/javascript\">
function setCompanyMasterID(source, eventargs) {");
cstext2.Append("document.getElementById ('" + ClientID +
"_hdnCompanyMasterId').value = eventargs.get_value();");
cstext2.Append("document.getElementById ('" + ClientID +
"_hdnCompanyName').value = document.getElementById
('" + ClientID + "_txtAutoCompleteforCompany').value; }");
cstext2.Append(" </script>");
ScriptManager.RegisterClientScriptBlock(this, GetType(),
"OnClientItemSelected", cstext2.ToString(),false);
}
最后在页面上调用控件，在页面的 .cs 文件中，您可以使用
// UcCompany is the ID of the control
string Company = UcCompany.GetCompanyName(); // To get the compnay name selected
int CompanyMasterID = UcCompany.GetCompanyMasterId();// To get the ID of
// the company selected using auto suggest
关注点
到目前为止，我使用 JavaScript 和 jQuery 实现了各种自动建议，这是我第一次被我的客户要求仅需要 Ajax 控件。所以我实现了它，并且觉得它很有趣。希望它也能帮助您使用 AJAX 添加自动建议功能。