# AutoComplete with Custom Data Source

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



You can bind AutoComplete control to a complex type list using the **SelectedValuePath** and **DisplayMemberPath** properties. Here, we are binding the AutoComplete control to SystemColors class of Namespace, System.Drawing. The control will provide the list of all the members available in this class.

The following image shows how the AutoComplete appears after setting the **SelectedValuePath** and **DisplayMemberPath** properties.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/selection_004.png)

The following code example demonstrates how to enable complex type binding in AutoComplete:

### Custom Datasource for AutoComplete

1.  Add a new class to the folder **Models** (for example: `NamedColor.cs`).
2.  Add the following code to the new model to define the classes that serve as a datasource for the AutoComplete control.
    
    ```csharp
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;namespace MVCFlexGrid.Models
    {
        public class NamedColor
        {
            public string Name { get; set; }
            public string Value { get; set; }
        }
    }
    ```
    

**AutoCompleteController.cs**

```razor
public ActionResult ComplexType()
{
    var list = GetSystemColors();
    return View(list);
}
private static NamedColor[] GetSystemColors()
{
    return Enum.GetValues(typeof(KnownColor))
        .Cast<KnownColor>()
        .Select(c => new NamedColor
        {
            Name = c.ToString(),
            Value = "#" + Color.FromKnownColor(c).ToArgb().ToString("X8").Substring(2)
        })
        .ToArray();
}
```

**AutoComplete.cshtml**

```razor
@model IEnumerable<MVCFlexGrid.Models.NamedColor>
<div>
    <label>Complex Type List</label>
    @(Html.C1().AutoComplete()
        .Bind(Model)
        .DisplayMemberPath("Name")
        .SelectedValuePath("Value")
    )
</div>
```