1. Home
  2. Forum
  3. Blazor
  4. AutoComplete with custom data

AutoComplete with custom data

Trying to use the Autocomple with a custom data connection

my data is coming from a service that uses dependency injection

tried to inject it into a custom DataAdaptor class but have an issue

is that possible or is there another way to have a simple way to allow custom data to be supplied to the AutoComplete?

thanks

Mike


5 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team May 24, 2021 12:37 PM UTC

Hi Michael, 


Greetings from Syncfusion support. 


We checked your query. Autocomplete component supports custom value. By enabling the property “AllowCustom=true” we can use custom value functionalities. When you provide values to the @bind-Value attribute, if such values are not found in the data source, then that value will be updated in both the component and the value property. Refer the below code. 


@using Syncfusion.Blazor.DropDowns; 
<SfAutoComplete TValue="string" TItem="GameFields" Placeholder="e.g. Basketball" @bind-Value="value" DataSource="@Games" AllowCustom="true"> 
    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings> 
</SfAutoComplete> 
 
 
@code { 
 
    public string value { get; set; } = "Amer"; 
 
    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" }, 
        new GameFields(){ ID= "Game3", Text= "Basketball" }, 
        new GameFields(){ ID= "Game4", Text= "Cricket" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10",Text= "Tennis"}, 
    }; 
} 



Screenshot: 

 

From the query, we could not predict exact requirement. If you provide the below details, that would be helpful to provide the solution for your requirement. 


  1. Code snippet of the razor page.
  2. Code snippet of service.
  3. Code snippet of Custom Data Adaptor.
  4. Video demonstration of the issue.

Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N 


MS Michael Salzlechner May 24, 2021 01:07 PM UTC

in my case i need to be able to supply the items for the DataSource list using a custom function


something like

public List<GameFields> GetAutoCompleteItems (String searchtext)
{
}

how can i connect a function like this to the autocomplete to suuply the items?
 



SN Sevvandhi Nagulan Syncfusion Team May 25, 2021 07:57 AM UTC

Hi Michael, 


We checked your query. If you are getting the data from the service as list of items, then you can those values with the existing data source item using AddRange method. Here we retrieved the data from the service and added these items to the data source bound variable. Refer the following code. 


[Index.razor] 


public List<AssetTagsViewModel> AssetTagsFilterModel = new List<AssetTagsViewModel>() { }; 
 
    protected override void OnInitialized() 
    { 
        AssetTagsFilterModel.AddRange(ownservice.GetData(text)); 
    } 
} 


[Service] 


public List<AssetTagsViewModel> GetData(String searchtext) 
        { 
            List<AssetTagsViewModel> Country = new List<AssetTagsViewModel> 
        { 
            new AssetTagsViewModel() { Tag = "Australia", ID = "AU" }, 
            new AssetTagsViewModel() { Tag = "Bermuda", ID = "BM" }, 
            new AssetTagsViewModel() { Tag = "Canada", ID = "CA" }, 
            new AssetTagsViewModel() { Tag = "Cameroon", ID = "CM" }, 
            new AssetTagsViewModel() { Tag = "Denmark", ID = "DK" }, 
            new AssetTagsViewModel() { Tag = "France", ID = "FR" }, 
            new AssetTagsViewModel() { Tag = "Finland", ID = "FI" } 
        }; 
            return Country;   
        } 


Please find the sample below. 




Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N 



MS Michael Salzlechner May 25, 2021 12:49 PM UTC

thank you for the reply. 

not quite what i am looking for though

in your example the function gets called once with a fixed text that is not used for lookups

the function needs to be called every time the user types text into the autocomplete. 

The search text is the text the user types into the autocomplete and will be used by the service to perform the data lookup.


SN Sevvandhi Nagulan Syncfusion Team May 26, 2021 08:35 AM UTC

Hi Michael, 


Thanks for the update. 


We checked your query. In the sample below, we get the data from the service using the typed key and result the can be passed to the Filter method of autocomplete component.  Pass the resultant value to filter method instead of directly assigning those values to data source variable. Kindly refer the following code. 


<div class="page-inner" id="pageinner"> 
    <p>Datasource Values</p> 
 
    <div class="row"> 
        <div class="col-12 mt-3 pt-3"> 
            <div class="inner-body mg-main"> 
                <SfAutoComplete @ref="@AutoCompleteObj" TValue="string" TItem="AssetTagsViewModel" AllowFiltering="true" DataSource="@AssetTagsFilterModel"> 
                    <AutoCompleteFieldSettings Value="Tag"></AutoCompleteFieldSettings> 
                    <AutoCompleteEvents TItem="AssetTagsViewModel" TValue="String" Filtering="@OnFiltering"></AutoCompleteEvents> 
                </SfAutoComplete> 
            </div> 
        </div> 
    </div> 
</div> 
 
 
 
@code { 
    SfAutoComplete<string, AssetTagsViewModel> AutoCompleteObj; 
 
    public List<AssetTagsViewModel> AssetTagsFilterModel = new List<AssetTagsViewModel>() { }; 
    private async Task OnFiltering(FilteringEventArgs args) 
    { 
        // Passing the typed value to the function 
        var filteredvalue = ownservice.GetData(args.Text); 
        var query = new Syncfusion.Blazor.Data.Query().Select(new List<string> { "Tag" }).Where("Tag", "startswith", args.Text, true); 
        // Filter the suggestion list based on the typed value. 
        AutoCompleteObj.Filter(filteredvalue, query); 
    } 
} 


[Service] 

public class CountryService 
    { 
 
        public List<AssetTagsViewModel> GetData(string value) 
        { 
            List<AssetTagsViewModel> Country = new List<AssetTagsViewModel> 
        { 
            new AssetTagsViewModel() { Tag = "Australia", ID = "AU" }, 
            new AssetTagsViewModel() { Tag = "Bermuda", ID = "BM" }, 
            new AssetTagsViewModel() { Tag = "Canada", ID = "CA" }, 
            new AssetTagsViewModel() { Tag = "Cameroon", ID = "CM" }, 
            new AssetTagsViewModel() { Tag = "Denmark", ID = "DK" }, 
            new AssetTagsViewModel() { Tag = "France", ID = "FR" }, 
            new AssetTagsViewModel() { Tag = "Finland", ID = "FI" } 
        }; 
            if (value.Length > 0) 
            { 
                return Country.Where(a => a.Tag.ToString().ToLower().StartsWith(value)).ToList(); 
            } 
            else 
            { 
                return Country; 
            } 
        } 
    } 


Please find the sample below. 




Kindly get back to us for further assistance. 


Regards, 
Sevvandhi N 


Marked as answer
Loader.
Up arrow icon