DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

AutoComplete

in namespace DotVVM.BusinessPack.Controls

Renders an <input> element with support for auto-complete.

Properties

Name Type Description Notes Default Value
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
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
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
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 unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
ItemTemplate ITemplate Gets or sets the template used to render each item in the DataSource.
attribute
inner element
static value
bindable
default
ItemTextBinding IValueBinding 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
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
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.

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.

HTML Rendered by the Control

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

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message