title: How to use select2 component in blazor?
body: <p>hello community I am trying to use the select2 component in blazor, I took an example from github but the truth is I am lost in how to fill the component with the records from the database</p>
  <p>this is the razor page and this is the component:</p>
  <pre><code>&lt;span&gt;Simple string example&lt;/span&gt;
  &lt;Select2 TItem=&quot;string&quot;
           Id=&quot;simple-string-example&quot;
           Data=&quot;@SimpleStringList&quot;
           @bind-Value=&quot;@ValueSelected&quot;&gt;
  &lt;/Select2&gt;
  &lt;span&gt;Currently selected value: @ValueSelected&lt;/span&gt;
  &lt;br /&gt;
  
  @code {
  
      private EditContext EditContext { get; set; }
      private Select2&lt;SomeInnerObject&gt; ProvidedSelect2Ref { get; set; }
      public SomeObject FakeObject { get; set; } = new SomeObject { SomeName = &quot;Name&quot; };
      private List&lt;string&gt; SimpleStringList { get; set; } = new List&lt;string&gt;();
      private List&lt;SomeInnerObject&gt; InnerObjectList { get; set; }
      private string ValueSelected { get; set; }
  
      private SomeInnerObject FooObject = new SomeInnerObject { InnerName = &quot;Inner Foo&quot; };
  
      protected override void OnAfterRender(bool firstRender)
      {
          base.OnAfterRender(firstRender);
          if (firstRender)
          {
              SimpleStringList.Add(&quot;Foo&quot;);
              SimpleStringList.Add(&quot;Bar&quot;);
              SimpleStringList.Add(&quot;Baz&quot;);
  
              InnerObjectList = new List&lt;SomeInnerObject&gt; { FooObject, new SomeInnerObject { InnerName = &quot;Inner bar&quot; } };
              for (var i = 0; i &lt; 100; i++)
                  InnerObjectList.Add(new SomeInnerObject { InnerName = $&quot;Inner bar{i}&quot; });
              EditContext = new EditContext(FakeObject).AddDataAnnotationsValidation();
              StateHasChanged();
          }
      }   
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/KHXkB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KHXkB.png" alt="enter image description here" /></a></p>
  <p>How could you fill the component with records from the database, calling an api in a controller, something like this:</p>
  <pre><code>private async Task&lt;IEnumerable&lt;Persona&gt;&gt; BuscarPersonas(string searchText)
      {
          var responseHttp = await repositorio.Get&lt;List&lt;Persona&gt;&gt;($&quot;api/Personas/buscar/{searchText}&quot;);
          return responseHttp.Response;
      }
  }
  </code></pre>