1. Home
  2. Forum
  3. Blazor
  4. Problem with AutoComplete element

Problem with AutoComplete element

I am trying to add autocomplete component to my Blazor WebAssembly App. I did everything according to the instructions. It should provides a text box with a list of suggestions to select from as the user types, but I have it without list of suggestions.

Снимок.PNG

My question is: why is this happening and how to fix it?


Perhaps this is due to errors in index.html?



<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>



Cannot resolve file 'StockMarket.Client.styles.css'

Cannot resolve directory '_content'

Cannot resolve directory 'Syncfusion.Blazor.Themes'

Cannot resolve file 'bootstrap5.css'

Cannot resolve directory '_content'

Cannot resolve directory 'Syncfusion.Blazor.Core'

Cannot resolve directory 'scripts'

Cannot resolve file 'syncfusion-blazor.min.js'

Cannot resolve directory '_framework'

Cannot resolve file 'blazor.webassembly.js'



Detailed description of my actions:


1) Installed nuget package Syncfusion.Blazor

2) Added this code to Program.cs in client side


using Syncfusion.Blazor;


builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });


3. Added style sheet to index.html in client side


<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />


4. Added script reference to index.html in client side


<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>


5. Added to _import.razor


@using Syncfusion.Blazor

@using Syncfusion.Blazor.DropDowns



1 Reply
SP Sureshkumar P Syncfusion Team June 17, 2022 12:31 PM UTC

We suggest you follow the below steps to resolve the issue from your application

Step 1: Added this code to Program.cs in client-side without IgnoreScriptIsolation as like below:

builder.Services.AddSyncfusionBlazor();

step 2: adding script and theme file inside the index.html file:

Refer below link regarding how to refer scripts. https://blazor.syncfusion.com/documentation/common/adding-script-references#refer-script-from-static-web-assets

  1. If you are using Syncfusion.Blazor NuGet package,

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

  1. If you individual NuGet packages refer scripts as below,

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

For Themes - Ensure Syncfusion.Blazor.Themes NuGet is referenced in your application,

https://blazor.syncfusion.com/documentation/appearance/themes


Loader.
Up arrow icon