RadAutoComplete control has been replaced with RadAutoCompleteView and will be removed from the suite soon. You can read about the differences between both components and how to migrate to the new RadAutoCompleteView in the kb article here: Replace AutoComplete with AutoCompleteView

Data Binding

For all cases where the business items are not simple strings data-binding is necessary in order to correctly visualize information. The RadAutoComplete component supports data binding in the form of path properties.

• TextSearchPath (string): Gets or sets the name of the property the search function will be executed against.
• ImagePath (string): Gets or sets the name of the property holding a path to an image. This property is optional.

The TextSearchPath property is required in data-binding scenarios.

The RadAutoComplete component provides a default template for suggestion items that cannot be modified. You can use a custom template if you need to customize the suggestion items.

Example

Here is a simple view model that will be used as data source for the RadAutoComplete suggestions.

public class BusinessObject
{
    public BusinessObject(string name, string imageSource)
    {
        this.Name = name;
        this.ImageSource = imageSource;
    }

    public string Name { get; set; }

    public string ImageSource { get; set; }
}

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<BusinessObject>()
        {
            new BusinessObject("Freda Curtis", "available32.png"),
            new BusinessObject("Jeffery Francis", "away32.png"),
            new BusinessObject("Eva Lawson", "available32.png"),
            new BusinessObject("Emmett Santos", "away32.png"),
            new BusinessObject("Theresa Bryan", "away32.png"),
            new BusinessObject("Jenny Fuller", "available32.png"),
            new BusinessObject("Terrell Norris", "away32.png"),
            new BusinessObject("Eric Wheeler", "busy32.png"),
            new BusinessObject("Julius Clayton", "available32.png"),
            new BusinessObject("Alfredo Thornton", "busy32.png"),
            new BusinessObject("Roberto Romero", "busy32.png"),
            new BusinessObject("Orlando Mathis", "available32.png"),
            new BusinessObject("Eduardo Thomas", "away32.png"),
            new BusinessObject("Harry Douglas", "available32.png"),
            new BusinessObject("Parker Blanton", "available32.png"),
            new BusinessObject("Leanne Motton", "busy32.png"),
            new BusinessObject("Shanti Osborn", "available32.png"),
            new BusinessObject("Merry Lasker", "busy32.png"),
            new BusinessObject("Jess Doyon", "away32.png"),
            new BusinessObject("Kizzie Arjona", "busy32.png"),
            new BusinessObject("Augusta Hentz", "available32.png"),
            new BusinessObject("Tasha Trial", "away32.png"),
            new BusinessObject("Fredda Boger", "busy32.png"),
            new BusinessObject("Megan Mowery", "available32.png"),
            new BusinessObject("Hong Telesco", "away32.png"),
            new BusinessObject("Inez Landi", "busy32.png"),
            new BusinessObject("Taina Cordray", "available32.png"),
            new BusinessObject("Shantel Jarrell", "busy32.png"),
            new BusinessObject("Soo Heidt", "available32.png"),
            new BusinessObject("Rayford Mahon", "away32.png"),
            new BusinessObject("Jenny Omarah", "away32.png"),
            new BusinessObject("Denita Dalke", "available32.png"),
            new BusinessObject("Nida Carty", "available32.png"),
            new BusinessObject("Sharolyn Lambson", "away32.png"),
            new BusinessObject("Niki Samaniego", "available32.png"),
            new BusinessObject("Rudy Jankowski", "away32.png"),
            new BusinessObject("Matha Whobrey", "busy32.png"),
            new BusinessObject("Jessi Knouse", "available32.png"),
            new BusinessObject("Vena Rieser", "away32.png"),
            new BusinessObject("Roosevelt Boyce", "available32.png"),
            new BusinessObject("Kristan Swiney", "away32.png"),
            new BusinessObject("Lauretta Pozo", "busy32.png"),
            new BusinessObject("Jarvis Victorine", "away32.png"),
            new BusinessObject("Dane Gabor", "busy32.png")
        };
    }

    public List<BusinessObject> Source { get; set; }
}

Here is how to setup the RadAutoComplete:

<telerikInput:RadAutoComplete x:Name="AutoComplete"
                              ImagePath="ImageSource"
                              ItemsSource="{Binding Source}"
                              TextSearchPath="Name"
                              Watermark="Search here...">
    <telerikInput:RadAutoComplete.SuggestionViewHeight>
        <OnPlatform x:TypeArguments="x:Double"
                    Android="200"
                    WinPhone="400"
                    iOS="400" />
    </telerikInput:RadAutoComplete.SuggestionViewHeight>
    <telerikInput:RadAutoComplete.BindingContext>
        <local:ViewModel />
    </telerikInput:RadAutoComplete.BindingContext>
</telerikInput:RadAutoComplete>

Where:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

See Also

• AutoComplete Getting Started
• SuggestionItemTemplate