Blazor Cuadro combinado de selección única

El Blazor ComboBox admite el modo de selección única y el filtrado rápido de la lista de elementos a través del indicador de entrada principal. Los usuarios pueden escribir rápidamente el artículo que están buscando y se les presentará una lista de opciones. Al presionar la tecla Enter, se seleccionará la primera coincidencia resaltada.

Blazor Single Selection Example

Para habilitar la selección única y el filtrado rápido, establezca la propiedad SingleSelect en el componente ComboBox. La experiencia del usuario y la navegación con el teclado seguirán siendo prácticamente las mismas, pero en lugar de tener que escribir su consulta de búsqueda en un cuadro de filtrado especial encima de la lista de opciones, se utilizará el cuadro de entrada principal.

<IgbCombo SingleSelect></IgbCombo>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    public class SampleData {
        public static List<City> Cities = GetCities();

        public static List<City> GetCities() {
            var data = new List<City> {
                new City {
                    Id = "UK01",
                    Name = "London",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK02",
                    Name = "Manchester",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK03",
                    Name = "Birmingham",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK04",
                    Name = "Glasgow",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK05",
                    Name = "Liverpool",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "US01",
                    Name = "New York",
                    Country = "United States of America",
                },
                new City {
                    Id = "US02",
                    Name = "Miami",
                    Country = "United States of America",
                },
                new City {
                    Id = "US03",
                    Name = "Philadelphia",
                    Country = "United States of America",
                },
                new City {
                    Id = "US04",
                    Name = "Chicago",
                    Country = "United States of America",
                },
                new City {
                    Id = "US05",
                    Name = "Springfield",
                    Country = "United States of America",
                },
                new City {
                    Id = "US06",
                    Name = "Los Angeles",
                    Country = "United States of America",
                },
                new City {
                    Id = "US07",
                    Name = "Houston",
                    Country = "United States of America",
                },
                new City {
                    Id = "US08",
                    Name = "Phoenix",
                    Country = "United States of America",
                },
                new City {
                    Id = "US09",
                    Name = "San Diego",
                    Country = "United States of America",
                },
                new City {
                    Id = "US10",
                    Name = "Dallas",
                    Country = "United States of America",
                },
                new City {
                    Id = "BG01",
                    Name = "Sofia",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG02",
                    Name = "Plovdiv",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG03",
                    Name = "Varna",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG04",
                    Name = "Burgas",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "IT01",
                    Name = "Rome",
                    Country = "Italy",
                },
                new City {
                    Id = "IT02",
                    Name = "Milan",
                    Country = "Italy",
                },
                new City {
                    Id = "IT03",
                    Name = "Naples",
                    Country = "Italy",
                },
                new City {
                    Id = "IT04",
                    Name = "Turin",
                    Country = "Italy",
                },
                new City {
                    Id = "IT05",
                    Name = "Palermo",
                    Country = "Italy",
                },
                new City {
                    Id = "IT06",
                    Name = "Florence",
                    Country = "Italy",
                },
            };

            return data;
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <style>
        .options {
            display: flex;
            flex-direction: column;
            margin-top: 12px;
            gap: 8px;
        }
    </style>

    <IgbCombo
        T="string"
        Label="Cities"
        Placeholder="Pick a city"
        Data="Data"
        ValueKey="Id"
        DisplayKey="Name"
        GroupKey="@Group"
        Disabled="@Disabled"
        SingleSelect>
    </IgbCombo>

    <div class="options">
        <IgbSwitch Change="@OnGroupClick">Enable Grouping</IgbSwitch>
        <IgbSwitch Change="@OnDisableClick">Disable Combo</IgbSwitch>
    </div>
</div>

@code {
    private List<City> Data;
    private string Group = "";
    private bool Disabled = false;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
    }

    public void OnGroupClick(IgbCheckboxChangeEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Group = sw.Checked ? "Country" : "";
    }

    public void OnDisableClick(IgbCheckboxChangeEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Disabled = sw.Checked;
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Selection API

La API de selección para un ComboBox con la propiedad SingleSelect aplicada sigue siendo prácticamente la misma; sin embargo, existen algunas diferencias importantes en comparación con los ComboBox que no tienen esta propiedad establecida.

La principal diferencia es que sólo se puede seleccionar un elemento a la vez. Por ejemplo, si ha especificado una ValueKey para su componente combinado, pasar más de un elemento a los métodos Select / Deselect no tendrá ningún efecto. Esto también significa que cualquier elemento seleccionado previamente se deseleccionará automáticamente al realizar una nueva selección.

A continuación se explica cómo seleccionar/deseleccionar un elemento mediante programación en un combo de selección única.

Seleccionar elementos:

<IgbCombo SingleSelect @ref="Combo"></IgbCombo>

@code {
    private IgbCombo Combo;

    this.Combo.Select(new object[] { "UK01" });
}
razor

Para anular la selección de un elemento sin realizar una nueva selección, llame al método deselect.

Deseleccionar elementos:

<IgbCombo SingleSelect @ref="Combo"></IgbCombo>

@code {
    private IgbCombo Combo;

    this.Combo.Deselect(new object[] { "UK01" });
}
razor

Disabled features

Naturalmente, algunas opciones de configuración no tendrán efecto en un ComboBox de selección única.

Placeholder

Asignar un valor a la propiedad PlaceholderSearch no producirá ningún resultado ya que la entrada de filtrado que normalmente se coloca encima de la lista de opciones no estará presente en un único cuadro combinado de selección.

Autofocusing the list of options

Configurar la opción AutofocusList en un ComboBox de selección única tampoco tendrá ningún efecto.

La navegación con el teclado debe comportarse igual que con un ComboBox de selección no única, excepto por el hecho de que ahora la entrada principal desempeña el papel de un mensaje de filtrado y, por lo tanto, todas las acciones del teclado que se aplican a la entrada de filtrado/búsqueda se mueven al menú principal. mensaje de entrada.

Other Features

Todas las demás funciones se comportarán igual que en un componente ComboBox que no sea de selección única.

API Reference

IgbCombo