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
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 for each item.
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
Text String Gets or sets the text value entered by the 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 and the property is updated when the control loses its 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.

<bp:AutoComplete Text="{value: City}"
                 DataSource="{value: Suggestions}"
                 Placeholder="City" />
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.AutoComplete.sample1
{
    public class ViewModel
    {
        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: Changed Event

The Changed event can be used to trigger a command in the viewmodel when the value in the control changes.

By default, the Changed event is triggered only when the control loses its focus provided the value has been changed.

However, you can use the UpdateTextOnInput property to make the control trigger the event whenever the text inside changes.

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

namespace DotvvmWeb.Views.Docs.Controls.businesspack.AutoComplete.sample2
{
    public class ViewModel
    {
        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