AutoComplete
in namespace DotVVM.BusinessPack.Controls
Renders an <input> element with support for auto-complete.
Usage & Scenarios
Renders a TextBox control with the auto-complete feature.
You can use this control to let the user select from a pre-defined collection of strings, or let him to enter his own.
Sample 1: Basic Usage
Bind the DataSource property to a collection of strings.
The Text property will contain the text entered or selected by the user.
The Placeholder specifies the text displayed when the Text is empty.
<bp:AutoComplete Text="{value: City}"
DataSource="{value: Suggestions}"
Placeholder="City" />using System.Collections.Generic;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.AutoComplete.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public string City { get; set; }
public IEnumerable<string> Suggestions { get; set; } = new List<string> {
"Atlantic City",
"Boston",
"Chicago",
"Dallas",
"New York",
"Washington D.C.",
"Miami",
"San Francisco"
};
}
}Sample 2: Working with Objects
When the DataSource collection is bound to a collection of objects, you may use the ItemTextBinding to specify from which property to extract text when an object is selected from the list of suggestions.
To display custom content in the list items, you can use the ItemTemplate property to declare a custom template for the list items.
<bp:AutoComplete Text="{value: Country}"
DataSource="{value: Countries}"
ItemTextBinding="{value: Name}"
Placeholder="Country">
<span>{{value: Id}}. {{value: Name}}</span>
</bp:AutoComplete>using System.Collections.Generic;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.AutoComplete.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public string Country { get; set; }
public List<Country> Countries { get; set; } = new List<Country> {
new Country { Id = 1, Name = "Czech Republic" },
new Country { Id = 2, Name = "Slovakia" },
new Country { Id = 3, Name = "United States" }
};
}
}using System.Collections.Generic;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.AutoComplete.sample2
{
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
}
}Sample 3: Changed Event
The Changed event can be used to trigger a command in the viewmodel when the value in the control changes. It is triggered when the control loses its focus provided the value has been changed.
<bp:AutoComplete Text="{value: City}"
DataSource="{value: Suggestions}"
UpdateTextOnInput="false"
Changed="{command: CityChanged()}" />
<p>City {{value: City}} has been changed {{value: CityChangeCount}} times.</p>using System.Collections.Generic;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.AutoComplete.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public string City { get; set; }
public int CityChangeCount { get; set; }
public IEnumerable<string> Suggestions { get; set; } = new List<string> {
"Atlantic City",
"Boston",
"Chicago",
"Dallas",
"New York",
"Washington D.C.",
"Miami",
"San Francisco"
};
public void CityChanged() => CityChangeCount++;
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | |
|
AutoFocus | Boolean | Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false. |
attribute
static value
|
False |
|
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
static value
bindable
|
null |
|
DataSource | Object | Gets or sets the source collection or a GridViewDataSet that contains data in the control. |
attribute
bindable
|
null |
|
Enabled | Boolean | Gets or sets whether the control is enabled and can be modified. |
attribute
static value
bindable
|
True |
|
ID | String | Gets or sets the unique control ID. |
attribute
static value
|
null |
|
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null |
|
ItemTemplate | ITemplate | Gets or sets the template used to render each item in the DataSource. |
inner element
static value
default
|
null |
|
ItemTextBinding | IValueBinding | Gets or sets the binding which retrieves the text from a DataSource item. It retrieves the whole item by default. |
attribute
static value
bindable
|
null |
|
Placeholder | String | Gets or sets the text displayed when no item is selected (or when text is empty). |
attribute
static value
|
null |
|
TabIndex | Int32 | Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order. |
attribute
static value
|
0 |
|
Text | String | Gets or sets the text value entered by user. |
attribute
bindable
|
|
|
Type | AutoCompleteType | Gets or sets the type of the rendered text field. The default value is Text. |
attribute
static value
|
Text |
|
UpdateTextOnInput | Boolean | Gets or sets whether the Text property will be updated whenever the value is changed. By default, the value is false and the property is updated when the control loses focus. |
attribute
static value
|
False |
|
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
| Name | Type | Description | |
|---|---|---|---|
 |
Changed | Command | Gets or sets the command that will be triggered when the text (or value) is changed. |