SfAutoComplete - Width

[Volker]

Hi there,

when we add a search function in a header of a web-application (e.g. a person search) using the SfAutoComplete component, then we typically enter a view characters and the dropdown shows all the found results in the database. Clicking on an element row navigates us directly to the target side of customer management. That is easy to implement, no need for further help.

But:

The space in the top-menu for the input field is limited, the space for a popup is nearly endless. The lookup-result is a wide table with several columns (person search: ID, first name, sure name, city, country, birthdate), the input field is a narrow element. In addition there are only a view letters that must be entered to find the target person, so typically there is no need to provide space for 50+ letters. 

Hence what we need is to define different widths of the text-field and the dropdown section, when we strictly follow the mobile-first approach. Currently input field and popup seem to be tied together and no modification of the popup-width is possible without influencing the width of the input field itself.

In addition for mobile devices the dropdown popup must be in front and must be able to use the total width of the device.

Any idea how to achieve that?

Cheers,
Volker

[Sevvandhi Nagulan]

Hi Volker, 

Greetings from Syncfusion support. 

We checked the reported requirement. You can use the Width and PopupWidth property for changing the input element’s width and popup items width. Refer to the code below. 

 

 

        <SfAutoComplete TValue="string" TItem="GameFields"  Width="200px"  PopupWidth="200px" Placeholder="e.g. Basketball" DataSource="@Games"> 

            <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings> 

        </SfAutoComplete> 

 

@code{ 

    public class GameFields 

    { 

        public string ID { get; set; } 

        public string Text { get; set; } 

    } 

    public List<GameFields> Games = new List<GameFields>() 

{ 

        new GameFields(){ ID= "Game1", Text= "American Football" }, 

        new GameFields(){ ID= "Game2", Text= "Badminton" }, 

    }; 

} 

If we misunderstood your requirement, please elaborate more information about your requirement with screenshot or video to understand the requirement better. 

Regards, 

Sevvandhi N 

[Volker]

Hi Sevvandhi, 

thank you, totally missed that function.

I have another question:

I tried to combine a custom template (multi-column using flex) and high lighting the key word, so basically it looks like this (dummy):

<SfAutoComplete Highlight="true">

    <AutoCompleteTemplates TItem="Model">

        <ItemTemplate Context="data">

            @(data.ID)

            @(data.Name)

        </ItemTemplate>

    </AutoCompleteTemplates>

</SfAutoComplete>

But as soon as I use a autocomplete template, there is no more <span class="e-highlight">...</span> in the rendererd HTML-code. When I remove the AutoCompleteTemplates section, it works as expected.

Any idea?

Cheers,
Volker

[Sevvandhi Nagulan]

Hi Volker, 

You can highlight the matched item with the help of HighLightSearch public method. Please refer to the below code, 

    <SfAutoComplete TValue="string" @ref="auto" TItem="EmployeeData" cssClass="template" Placeholder="Select a customer" DataSource="@Data" Highlight="true"> 

        <AutoCompleteTemplates TItem="EmployeeData"> 

            <ItemTemplate> 

                <div> 

                    <div class="ename"> @((MarkupString)auto.HighLightSearch(context.FirstName, true, Syncfusion.Blazor.DropDowns.FilterType.Contains))  </div> 

                    <div class="job"> @((MarkupString)auto.HighLightSearch(context.Designation, true, Syncfusion.Blazor.DropDowns.FilterType.Contains))  </div> 

                </div> 

            </ItemTemplate> 

        </AutoCompleteTemplates> 

        <AutoCompleteFieldSettings Value="FirstName"></AutoCompleteFieldSettings> 

    </SfAutoComplete> 

  

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HighLightSearch-154005729 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Volker]

Hi Sevvandhi,

brilliant, works like a charm.

Just out of interest: have I overlooked this in the documentation, or are such detailed snippets for your components not documented?

Cheers from Graz/Austria,

Volker

[Sevvandhi Nagulan]

Hi Volker, 

We already documented this information in the release notes. Please find the release notes link below, 

Release notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#autocomplete 

Regards, 

Sevvandhi N