Why does autocomplete filter on values instead of text?

[Juan Tarquino]

Why does autocomplete filter on values instead of text? You would think that the default case would be for the user to enter the text that is needed to search among the names that get displayed. Instead, the default filter seems to be on the value.

[Berly Christopher]

Hi Richard, 

  

Greetings from Syncfusion support. 

  

We would like to inform you that AutoComplete component supports value field alone. So, you can map the id to the field and filter using the name field in the filtering event. Kindly refer the below code,  

  

 

<SfAutoComplete @ref="autocompleteObj" Autofill="false" Enabled="true" CssClass="e-outline" TValue="string" Placeholder="e.g. Australia" TItem="ProjectModel" DataSource="@Project"> 

    <AutoCompleteFieldSettings Value="ProjectCustomerName"></AutoCompleteFieldSettings> 

    <AutoCompleteEvents TValue="string" Filtering="onFlitering"></AutoCompleteEvents> 

</SfAutoComplete> 

 

 

@code { 

    SfAutoComplete<string, ProjectModel> autocompleteObj; 

    public class ProjectModel 

    { 

        public string ProjectCustomerName { get; set; } 

 

        public string ProjectID { get; set; } 

    } 

    public Query query; 

    List<ProjectModel> Project = new List<ProjectModel> 

{ 

        new ProjectModel() { ProjectCustomerName = "Australia", ProjectID = "AU" }, 

        new ProjectModel() { ProjectCustomerName = "Bermuda", ProjectID = "BM" }, 

        new ProjectModel() { ProjectCustomerName = "Canada", ProjectID = "CA" }, 

        new ProjectModel() { ProjectCustomerName = "Cameroon", ProjectID = "DK" }, 

        }; 

    public void onFlitering(FilteringEventArgs e) 

    { 

        e.PreventDefaultAction = true; 

        query = new Query().Where(new WhereFilter() 

        { 

            Field = "ProjectID", 

            value = e.Text, 

            Operator = "startswith", 

            IgnoreCase = true 

        }); 

 

        this.autocompleteObj.Filter(Project, query); 

 

    } 

} 

 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_Filter1184222485  

  

To know more about this, please refer the below knowledge base link. 

KB Link: https://www.syncfusion.com/kb/10158/why-autocomplete-does-not-filter-using-text-field 

  

Regards, 

Berly B.C 

[Steven Cramer]

Hmm why isn't filtering on text the default?  The user may not have a clue what the value is.

[Priyanka Karthikeyan]

Hi Steven Cramer,

We believe you might be interested in filtering the data of the autocomplete component using a text field. By default, value binding and filtering operations are solely based on the Value field within the AutoComplete component. However, mapping the text field for AutoComplete will update the text displayed in the popup list items. Please note that sorting and filtering will still be performed based on the value field. 

​Otherwise, we recommend using the Combobox component with allowfiltering as true, as it allows you to map both the text and value fields for the component. With the combobox, you can map both the key and value to the component.

For further guidance and to explore a documentation, please refer to the provided link.

ComboBox - https://blazor.syncfusion.com/documentation/combobox/getting-started

Sample : https://blazorplayground.syncfusion.com/embed/hNhUXEBoAbOzVkoK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,

Priyanka K