How to highlight suggested text in the dropdown list of RadAutoCompleteBox

2 posts, 0 answers
  1. Deepa
    Deepa avatar
    1 posts
    Member since:
    Oct 2012

    Posted 09 Jul 2015 Link to this post

    Hello,

     We need to highlight the typed (suggested) text in the popup window. For example,

    we have the following list:

    -One

    -Two

    -Three

    -Four

    -Five

    And if user is typing "T" then letter 'T' should be bolded in words '<b>T</b>wo' and '<b>T</b>hree'

     

    Thanks in advance!

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    2983 posts

    Posted 14 Jul 2015 Link to this post

    Hi Deepa,

    Thank you for writing.

    You can use the VisualItemFormatting event of the autocomplete drop down along with the HTML formatting functionality. For example, you can insert the bold tags in the items text with the following code: 
    public Form1()
    {
        InitializeComponent();
         
        AddAutoCompleteBox();
         
        radAutoCompleteBox1.AutoCompleteItems.Add("One");
        radAutoCompleteBox1.AutoCompleteItems.Add("Two");
        radAutoCompleteBox1.AutoCompleteItems.Add("Tree");
        radAutoCompleteBox1.AutoCompleteItems.Add("Four");
        radAutoCompleteBox1.AutoCompleteItems.Add("Five");          
        radAutoCompleteBox1.AutoCompleteMode = AutoCompleteMode.Suggest;
        
        radAutoCompleteBox1.ListElement.VisualItemFormatting += DropDownList_VisualItemFormatting;
    }
     
    void DropDownList_VisualItemFormatting(object sender, VisualItemFormattingEventArgs args)
    {
        var text = radAutoCompleteBox1.Text;
        if (args.VisualItem.Text.Contains(text))
        {
            int index = args.VisualItem.Text.IndexOf(text);
            if (args.VisualItem.Text.Length > index + text.Length)
            {
                string newText = args.VisualItem.Text.Insert(index + text.Length , "</b>");
                newText = newText.Insert(index, "<b>");
                newText = "<html>" + newText + "</html>";
                 
                args.VisualItem.Text = newText;
            }
        }
    }

    Please let me know if there is something else I can help you with. 
     
    Regards,
    Dimitar
    Telerik

Back to Top