RadComboBox is a good control to use for auto-suggestion/type-head/auto-complete, the only thing is when using webservice to get the item, the client template is pre-defined and can not be customized. However, we do find hightlighting the keyword in the auto-complete item list is really important for user experience. Because that tells the user visiually why certern items are suggested. The question is how can we do that? Here comes the solution...
1, Create the webservice method as below, the bolded part is the key to show the highlighted text, please also note the "OriginalText" attribute, this is going to be used as acutal text after selection.
[WebMethod]
public RadComboBoxData GetMatchedOrgName(RadComboBoxContext context)
{
List<RadComboBoxItemData> result = new List<RadComboBoxItemData>(context.NumberOfItems);
RadComboBoxData comboData = new RadComboBoxData();
if (context.Text.Length > 3)
{
try
{
List<Organization> organizations = OrganizationDAO.Instance.GetOrganizationByName(context.Text, 25);
int nRowsToReturn = Math.Min(organizations.Count, 25);
for (int i = 0; i < nRowsToReturn; i++)
{
RadComboBoxItemData itemData = new RadComboBoxItemData();
itemData.Text = SetHighlight(organizations[i].OrgName.Trim(), context.Text);
itemData.Value = i.ToString();
itemData.Attributes.Add("OrginalText", organizations[i].OrgName.Trim());
result.Add(itemData);
}
if (organizations.Count == 0)
{
comboData.Message = "No matches";
}
}
catch (Exception e)
{
comboData.Message = e.Message;
}
}
comboData.Items = result.ToArray();
return comboData;
}
//Highlight the item with bold text
private string SetHighlight(string strOrginal, string strNeedle)
{
Regex regex = new Regex(strNeedle, RegexOptions.IgnoreCase);
return regex.Replace(strOrginal, "<b>" + strNeedle + "</b>");
}
2, Configure RadComboBox, the reason we set ChangeTextOnKeyBoardNavigation="false" is because the bolded text will be displayed while using arrow up/down.
<telerik:RadComboBox ID="cmbOrgName" MaxLength="255" Width="236px" Height="250px"
MaxHeight="250px" DropDownWidth="250px" EnableItemCaching="false"
runat="server" AllowCustomText="True" AutoCompleteSeparator=";" ShowToggleImage="false"
ShowMoreResultsBox="false" EnableLoadOnDemand="True" EnableTextSelection="false"
ShowDropDownOnTextboxClick="false" MarkFirstMatch="false"
OnClientItemsRequested="cmbOrgName_ClientItemsRequested"
OnClientItemsRequesting="cmbOrgName_ClientItemsRequesting"
OnClientSelectedIndexChanged="cmbOrgName_ClientSelectedIndexChanged"
EnableVirtualScrolling="false" ChangeTextOnKeyBoardNavigation="false">
<ExpandAnimation Type="none" />
<CollapseAnimation Type="none" />
<WebServiceSettings Path="/secure/UserAuthService.asmx" Method="GetMatchedOrgName" />
</telerik:RadComboBox>
3, Get the customized attribute "OrginalText" and handle client events in javascript...
function cmbOrgName_ClientSelectedIndexChanged(sender, args) {
//Get OrginalText and set to the selected item
var orginalText = sender.get_selectedItem().get_attributes().getAttribute("OrginalText");
sender.set_text(orginalText);
}
function cmbOrgName_ClientItemsRequesting(sender, args) {
//clear the existing items
sender.get_items().clear();
}
//If no records returned, collapse the dropdown automatically.
function cmbOrgName_ClientItemsRequested(sender, args) {
if (sender.get_items().get_count() == 0) {
sender.toggleDropDown();
}
}
4, With this setup, you shall be able to get an auto-complete function like below organization field.
(Please note: This article only applies to RadControl 2009 Q2 or earlier version.)