DxDropDownListEditorBase<TData, TValue>.SearchMode Property

Specifies whether the component can search for text that users type in the edit box.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ListSearchMode.Default)]
[Parameter]
public ListSearchMode SearchMode { get; set; }

Property Value

Type	Default	Description
ListSearchMode	Default	A ListSearchMode enumeration value.

Available values:

Name	Description
Default	None is used. The filter is not applied to list items.
None	The filter is not applied to list items.
AutoSearch	The component searches for text that users type in the edit box.

Remarks

The DevExpress Blazor ComboBox and TagBox components can search for text, and filter and highlight search results. Use the following API members to enable search and filter capabilities:

• SearchMode — Specifies whether the component can search for text that users type in the edit box. When the AutoSearch mode is active, the ComboBox filters its items based on the search string and highlights string matches. All visible columns take part in search operations.

  Users can use special characters to create composite criteria. Refer to the following section for additional information: Search Syntax.

• SearchFilterCondition — Specifies the search and filter condition (Contains, Equals, or StartsWith).
• SearchTextParseMode — Specifies how the component combines words into the search query. If search text contains multiple words separated by space characters, words can be treated as a single condition or individual conditions. The following modes are available: GroupWordsByAnd, GroupWordsByOr, and ExactMatch.
• SearchEnabled - Specifies whether the component can search text in cells of the current column.

ComboBox Example

Razor

<DxComboBox Data="Staff.DataSource" 
            @bind-Value="@Value" 
            SearchMode="ListSearchMode.AutoSearch"
            SearchFilterCondition="ListSearchFilterCondition.Contains">
    <Columns>
        <DxListEditorColumn FieldName="FirstName"></DxListEditorColumn>
        <DxListEditorColumn FieldName="LastName"></DxListEditorColumn>
        <DxListEditorColumn FieldName="Department" SearchEnabled="false"></DxListEditorColumn>
    </Columns>
</DxComboBox>

@code {
    string Value { get; set; }
}

StaffData

namespace StaffData {
    public static class Staff {
        private static readonly Lazy<List<Person>> dataSource = new Lazy<List<Person>>(() => {
            var dataSource = new List<Person>() {
                new Person() { Id= 0 , FirstName="John", LastName="Heart", Department=Department.Electronics },
                new Person() { Id= 1 , FirstName="Samantha", LastName="Bright", Department=Department.Motors },
                new Person() { Id= 2 , FirstName="Arthur", LastName="Miller", Department=Department.Software },
                new Person() { Id= 3 , FirstName="Robert", LastName="Reagan", Department=Department.Electronics },
                new Person() { Id= 4 , FirstName="Greta", LastName="Sims", Department=Department.Motors },
                new Person() { Id= 5 , FirstName="Brett", LastName="Wade", Department=Department.Software },
                new Person() { Id= 6 , FirstName="Sandra", LastName="Johnson", Department=Department.Electronics },
                new Person() { Id= 7 , FirstName="Edward", LastName="Holmes", Department=Department.Motors },
                new Person() { Id= 8 , FirstName="Barbara", LastName="Banks", Department=Department.Software },
                new Person() { Id= 9 , FirstName="Kevin", LastName="Carter", Department=Department.Electronics },
                new Person() { Id= 10, FirstName="Cynthia", LastName="Stanwick", Department=Department.Motors },
                new Person() { Id= 11, FirstName="Sam", LastName="Hill", Department=Department.Electronics }};
            return dataSource;
        });
        public static List<Person> DataSource { get { return dataSource.Value; } }
    }

    public class Person {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Department Department { get; set; }
        public string Text => $"{FirstName} {LastName} ({Department} Dept.)";
        public override bool Equals(object obj) {
            if (obj is Person typedObj) {
                return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName)
                && (this.Department == typedObj.Department);
            }
            return base.Equals(obj);
        }
    }

    public enum Department { Motors, Electronics, Software }
}

When a user types text into the edit box, the ComboBox filters and highlights search results.

Run Demo: ComboBox - Search and Filter Data

Search Syntax

The search text can include special characters that allow users to create composite criteria. These characters are not in effect in the ExactMatch parse mode.

Group Operator for an Individual Criterion

+criterion

In GroupWordsByOr parse mode, precede a criterion with the plus sign to use the AND operator for this criterion. Other criteria are combined by the OR operator.

Search Text Sample	Description	Result Samples
maria anna +anders	contains either maria or anna, and must contain anders	Maria Anderson, Annabelle Anders

?criterion1 ?criterion2

In GroupWordsByAnd parse mode, precede criteria with the question mark to group them by the OR logical operator. Other criteria are combined by the AND operator.

Search Text Sample	Description	Result Samples
?maria ?anna anders	contains either maria or anna, and must contain anders	Maria Anderson, Annabelle Anders

Specify a Column for a Criterion

The List Box component can search text in every visible data column if the column’s SearchEnabled property is set to true.

column:criterion

Precede a search string with the column’s caption plus a colon character to search against a specific column.

You can use the initial characters of the caption to search against the first column whose caption starts with the specified substring. To search against a column whose caption contains space characters, specify the column’s display caption in quotation marks.

Search Text Sample	Description	Result Samples
cont:maria	contains maria in a column whose caption starts with cont	Maria, Maria Anders
"contact name":maria	contains maria in a column whose caption starts with contact name	Maria, Maria Anders

If the specified column is not found, the List Box seeks the search text in every visible data column.

Criterion With Spaces

"word1 word2"

To search for a string that contains a space character, specify this string in quotation marks. Additionally, you can use a quotation mark to specify a column whose caption contains space characters.

Search Text Sample	Description	Result Samples
"maria anders"	contains maria anders	Maria Anders
"contact name":maria	contains maria in a column whose caption starts with contact name	Maria, Maria Anders

Logical Not

-criterion

Precede a criterion with the minus sign to exclude records that match this criterion from the result.

Search Text Sample	Description	Result Samples
maria -anders	contains maria but not anders	Maria Lopes

Comparison Operators

The List Box component uses the Contains operator to build search criteria. You can specify the following comparison operators for individual criterion.

^criterion

Precede a criterion with the caret sign to display records that start with the specified criterion.

=criterion

Precede a criterion with the equals sign to display records that are equal to the specified criterion.

Search Text Sample	Description	Result Samples
^anna	starts with anna	Annabelle Anders
=ana	equal to ana	Ana

Wildcard Masks

~criterion

Precede a condition with the tilde sign to use the following wildcard masks in a criterion:

• The % symbol - substitutes zero or more characters.
• The _ symbol - substitutes a single character.

Search Text Sample	Description	Result Samples
~an%o	starts with an and ends with o	Ana Trujillo
~%any	starts with any symbol(s) and ends with any	Germany
~_ran%	starts with any symbol, then ran, and ends with any symbol(s)	Francisco Chang, France

Implements

DevExpress.Blazor.IDropDownListEditorBase<TData, TValue>.SearchMode