Implementing autocomplete for a TreeView inside a RadComboBox

[Stefan]

Hi all,

I'm developing a custom control based off the TreeView in ComboBox sample.
I now have a requirement to enable autocomplete searching inside the RadComboBox. I basically want to clone the existing Filter behaviour of the RadComboBox to search within the tree and display partial matches. It's clear that the existing Filter functionality doesn't work for a combobox containing a single TreeView item.

The behaviour I'd like to see is that on keypress, a filtered version of the TreeView appears as the autocomplete suggestions. It would be nice if the tree structure were preserved to give the user an idea of what areas of the tree their suggestions came from, but it's not a current requirement.

In my case, the contents of the TreeView are all loaded on the client side (I'm not using a web service to populate it as the largest possible tree will only contain a few hundred items, and usually far fewer), so I have everything I need on the client (and would prefer everything happen client side to keep it as zippy as possible).

My question (to anyone) is.. What's the best way to tackle this problem?

My markup currently looks like this:

        <telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="Type to search"
            ShowToggleImage="true" Width="500" OnClientDropDownOpened="DropDownOpenedHandler"
            OnClientDropDownClosing="RadComboBoxClosing" AllowCustomText="true" ShowDropDownOnTextboxClick="false" 
            OnClientKeyPressing="ComboBoxKeyPressing" IsCaseSensitive="false" MinFilterLength="2" Filter="Contains">
            <ItemTemplate>
                <div id="div1">
                    <telerik:RadTreeView ID="RadTreeView" runat="server" SingleExpandPath="true" ShowLineImages="false"
                        OnClientNodeClicking="nodeClicking" OnClientNodeClicked="NodeSelected" OnInit="TreeViewInit"
                        OnLoad="TreeViewLoad" OnClientNodeExpanded="nodeChanged" OnClientNodeCollapsed="nodeChanged">
                    </telerik:RadTreeView>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem Text="" />
            </Items>
        </telerik:RadComboBox>

Thus far I'm able to display my treelist and make selections with the mouse. I suspect my implementation lies in writing Javascript for the ComboBox's OnClientKeyPressing event. I am not very Javascript-competent and am getting better with jQuery, so hope someone can give me a bit of advice on how best to proceed.

I think this is what I'll have to do in the ComboBoxKeyPressing event:

function ComboBoxKeyPression(sender, args){
    if (text in combobox < number of chars to trigger autocomplete)
      return;
   if (text in combobox = empty){
      MakeAllTreeNodesVisible();
      CloseComboBoxDropDown();
      return;
   }
   // else apply filter to tree
   var searchText = text entered by user;
   foreach(TreeNode in tree)
      if (node text contains my search keyword)
         show node;
      else
         hide node;

   // iterate through tree and trim 'empty' internal nodes (need to recurse to all child levels)
   foreach (TreeNode in tree)
      if (node contains children but none are visible)
         node.hide();
      else
         node.expand(); // so it's visible in the autocomplete list
}

This seems... Expensive and a bit hokey to performs on every keypress.

Can anyone comment as to a better solution, an existing example, or any resources that might make this easier?

I did look at the jQueryUI Autocomplete plugin but didn't think there was an effective way I could integrate it into the TreeView that is essential to this user control.

Thanks for any feedback!

[Veronica]

Hi Stefan,

Please take a look at this forum post for solution.

Best wishes,
Veronica Milcheva
the Telerik team

[Mehmet Ali Bayraktar]

Hi,

I want to implement a autocomplete function to treeview in radcombobox too... how can i do this? can you  give me a full example please..? I want to search in treeview in radcombobox..Sorry for my english..Thank you..

[Veronica]

Hi Mehmet Ali Bayraktar,

Please take a look at this Knowledge Base article for how to manage Search functionality when using RadTreeView in RadCombobox.

Regards,
Veronica Milcheva
the Telerik team