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
property icon 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
property icon DataSource IEnumerable Gets or sets the data source containing data for this control.
attribute
inner element
static value
bindable
default
null
property icon Enabled Boolean Gets or sets whether the control is enabled and can be modified.
attribute
inner element
static value
bindable
default
True
property icon ItemTemplate ITemplate Gets or sets the template used to render each data item.
attribute
inner element
static value
bindable
default
null
property icon 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
property icon 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
property icon 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
property icon 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
property icon Text String Gets or sets the text value entered by user.
attribute
inner element
static value
bindable
default
property icon 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
property icon 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

Events

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

HTML produced by the control