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.

page.dothtml
ViewModel.cs

<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.

page.dothtml
ViewModel.cs

<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++;
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
Attributes	Dictionary<String,Object>		attribute inner element static value bindable default	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 inner element static value bindable default	False
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	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 inner element static value bindable default	null
DataSource	IEnumerable		attribute inner element static value bindable default	null
Enabled	Boolean	Gets or sets whether the control is enabled and can be modified.	attribute inner element static value bindable default	False
ID	String	Gets or sets the unique control ID.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
InnerText	String	Gets or sets the inner text of the HTML element.	attribute inner element static value bindable default	null
ItemTemplate	ITemplate	Gets or sets the template used to render each item in the DataSource.	attribute inner element static value bindable 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 inner element static value bindable default	null
LoadItems	AutoComplete+LoadItemsFunc		attribute inner element static value bindable default	null
Placeholder	String	Gets or sets the text displayed when no item is selected (or when text is empty).	attribute inner element static value bindable default	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 inner element static value bindable default	0
Text	String	Gets or sets the text value entered by user.	attribute inner element static value bindable default
Type	AutoCompleteType	Gets or sets the type of the rendered text field. The default value is Text.	attribute inner element static value bindable default	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 inner element static value bindable default	False
Visible	Boolean	Gets or sets whether the control is visible.	attribute inner element static value bindable default	True

Events

	Name	Type	Description
	Changed	Command	Gets or sets the command that will be triggered when the text (or value) is changed.