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 values from a pre-defined collection, 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">
<ItemTemplate>
<span>{{value: Id}}. {{value: Name}}</span>
</ItemTemplate>
</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 = "Atlantic City" },
new Country { Id = 2, Name = "Boston" },
new Country { Id = 3, Name = "Chicago"},
new Country { Id = 4, Name = "Dallas"},
new Country { Id = 5, Name = "New York"},
new Country { Id = 6, Name = "Washington D.C."},
new Country { Id = 7, Name = "Miami"},
new Country { Id = 8, Name = "San Francisco"}
};
}
}
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 | IEnumerable |
attribute
bindable
|
null | ||
Enabled | Boolean | Gets or sets whether the control is enabled and can be modified. |
attribute
static value
bindable
|
False | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
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<String> | 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 | |
LoadItems | AutoComplete+LoadItemsFunc |
attribute
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
bindable
|
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. |