Edit on Github

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
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. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
DataSource	IEnumerable	Gets or sets the data source containing data for this control.	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	True
ID	String	Gets or sets the control client ID within its naming container.	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. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children.	attribute inner element static value bindable default	null
ItemTemplate	ITemplate	Gets or sets the template used to render each data item.	attribute inner element static value bindable default	null
ItemTextBinding	IValueBinding<String>	Gets or sets the binding which retrieves the text from a data item. It retrieves the whole item by default.	attribute inner element static value bindable default	null
LoadItems	AutoComplete+LoadItemsFunc	Gets or sets a function used to load additional items from server. For example, it is used to search for items on server-side.	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. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Events

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

Edit on Github

AutoComplete

Usage & Scenarios

Sample 1: Basic Usage

Sample 2: Working with Objects

Sample 3: Changed Event

Properties

Events

HTML produced by the control

On this page

AutoComplete

Usage & Scenarios

Sample 1: Basic Usage

Sample 2: Working with Objects

Sample 3: Changed Event

Properties

Events

HTML produced by the control

On this page

Information about cookies