# AutoExpandSelection

## Content

You can use the AutoExpandSelection property to specify whether DropDown control automatically fills the text box portion of a combo box with a value from the combo box list that matches the characters you enter as you type in the combo box.

>type=note
> **Note**: In case of **InputColor** and **InputDate** control, the default value of AutoExpandSelection property is set to **True**. For all the other Input controls the default value is False.

AutoExpandSelection property is available in the following Input DropDown controls;

* InputColor
* InputDate
* AutoComplete, ComboBox
* InputTime

The following code example demonstrates how to use AutoExpandSelection in the Input control.

**IndexController.cs**

```razor
public ActionResult Index()
  {
ViewBag.Cities = Models.Cities.GetCities();
return View();
   }
```

**Index.cshtml**

```razor
@{
        List<string> cities = ViewBag.Cities;
<div>
    <c1-combo-box selected-index=0 auto-expand-selection="true">
        <c1-items-source source-collection=@cities></c1-items-source>
    </c1-combo-box>
</div>
```

***

## CustomFilter

The <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">CustomFilter</span> property specifies a JavaScript callback that defines custom matching logic between user input and drop-down items.
This functionality supports non-literal matching scenarios, such as treating Hiragana, full-width Katakana, and half-width Katakana variations as equivalent.
<span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">CustomFilter</span> is available for the following Input controls:

* [AutoComplete](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/AutoComplete)
* [MultiAutoComplete](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/MultiAutoComplete)
* [MultiSelect](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/MultiSelect)
* [MultiSelectListBox](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/multiselectlistbox)

For <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">MultiSelect</span> and <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">MultiSelectListBox</span>, enable search filtering by setting the <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">ShowFilterInput</span> property to <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">true</span>.
![C1Web Input Controls - Custom Filter process in AutoComplete.](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/customFilter%20GIF-20261006.3f3754.gif)

***

### Code Snippets

**Controllers**
Add the following action method to supply the list of words. In [ASP.NET](http://asp.net/ "http://ASP.NET") Core, the action returns `IActionResult`:

```auto
private static readonly List<string> _kanaWords = new List<string>
{
    "あいう", "アイウ", "ｱｲｳ",
    "あいえ", "アイエ", "ｱｲｴ",
    "かきく", "カキク", "ｶｷｸ",
    "さしす", "サシス", "ｻｼｽ"
};

public ActionResult Index()
{
    ViewBag.KanaWords = _kanaWords;
    return View();
}
```

**[ASP.NET](http://ASP.NET) Core View**
Define the client-side script and set the <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">custom-filter</span> attribute on the Tag Helper:

```auto
<c1-auto-complete min-length="1" custom-filter="kanaFilter">
    <c1-items-source source-collection="@kanaWords"></c1-items-source>
</c1-auto-complete>
```

***

## CustomHighlight

The CustomHighlight property specifies a JavaScript callback that customizes the HTML markup used to highlight matched items in an AutoComplete drop-down list.
Use CustomHighlight when the displayed match differs from the user-entered text, such as when the matching logic uses character normalization, phonetic matching, or alternate character forms.
CustomHighlight affects item rendering only. It does not change the filtering or matching logic.
The property is available in the following controls:

* [AutoComplete](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/AutoComplete)
* [MultiAutoComplete](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/MultiAutoComplete)

The following image shows how AutoComplete appears after applying the **CustomHighlight** property:
![C1Web Input Controls - Custom Highlight process in AutoComplete.](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/AutoComplete%20GIF-20261006.3e3ba6.gif)

***

### Code Snippets

**Controllers**
The following controller provides a list of Japanese Kana values.

```auto
private static readonly List<string> _kanaWords = new List<string>
{
    "あいう", "アイウ", "ｱｲｳ",
    "あいえ", "アイエ", "ｱｲｴ",
    "かきく", "カキク", "ｶｷｸ",
    "さしす", "サシス", "ｻｼｽ"
};
public ActionResult Index()
{
    ViewBag.KanaWords = _kanaWords;
    return View();
}
```

**[ASP.NET](http://asp.net/ "http://asp.net/") Core View**
For [ASP.NET](http://asp.net/ "http://ASP.NET") Core, define the JavaScript callback and set the `custom-highlight` attribute on the AutoComplete Tag Helper.

```auto
<c1-auto-complete min-length="1" custom-filter="kanaFilter" custom-highlight="kanaHighlight">
    <c1-items-source source-collection="@kanaWords"></c1-items-source>
</c1-auto-complete>
```