Important

Enable SaintsEditor and use a UI Toolkit inspector before using

• Display an array/list as a row of removable chips.
• Support search for a value.
• Drag an chip to reorder it.
• Support asynchronous requests
• Support search as you type

Similar to Dropdown: string callback that returns a Dropdown<T> or an enumerable (support async call of Task, UniTask, or IEnumerator), omit the callback for an enum or a type with static values.

Arguments

• string callback=null: callback used to obtain the available values.
• EUnique unique=EUnique.None: When using on a list/array, a duplicated option can be removed if Enique.Remove, or disabled if EUnique.Disable. No use for non-list/array.
• bool slashAsSub = true: should it tread / as path seperator in dropdown? This is helpful if you have SaintsField enabled, and has enum defined with InspectorName, but the / does not mean for grouping

using SaintsField;

[Serializable]
public enum Equipment
{
    Special,
    
    [InspectorName("Weapon/Sword")]
    Sword,

    [InspectorName("Weapon/Bow")]
    Bow,

    [InspectorName("Armor/Shield")]
    Shield,
}

[Chips] public Equipment[] normalList;
// duplicated options are disabled
[Chips(EUnique.Disable)] public Equipment[] disableList;
// duplicated options are removed
[Chips(EUnique.Remove)] public Equipment[] removeList;

[Chips(nameof(GetTags), slashAsSub = false)]  // callback
public List<string> tags;

private IEnumerable<string> GetTags() => new[]
{
    "Player",
    "Enemy/Boss",
    "Environment",
};

[Chips(nameof(GetEnvAsync))]  // async
public List<int> envLayer;

private IEnumerator GetEnvAsync()  // you can also use Waitable<Dropdown<int>>/Task<Dropdown<int>>
{
    yield return new WaitForSeconds(2);

    yield return new Dropdown<int>()
    {
        { "Basic", 1 },
        { "Advanced/MiniBoss", 2 },
        { "Advanced/Boss", 2 },
        { "Final/Boss", 3 },
    };
}

You can set icon and color if using Dropdown<T>

using SaintsField;

[Chips(nameof(GetIcons))]
public List<int> withIcons;

private Dropdown<int> GetIcons()
{
    return new Dropdown<int>
    {
        { "Search", 1, false, "search.png", Color.brown },
        { "Play", 2, true, "play.png" },  // disable
        { "Star", 3, false, "star.png", EColor.Gold.GetColor() },
        { "Pencil", 4, false, "pencil.png" },
    };
}

You can combine [AboveText] and [LabelText(null)] to make a full-line input, which will looks much like a standard chip picker

using SaintsField;

[AboveText("<label/>")]
[LabelText(null)]
[Chips(nameof(GetLongList))]
public List<string> longList;

You can drag to re-order just like Unity's default list. Use left-right arrow in input to change where you want to insert a new item. Use backspace to delete the front item. Use up-down arrow to select, and enter to pick the item from the popup.

To make a "search as you type", pass callback with parameters:

private IEnumerable<T> Callback(string search);
private Dropdown<T> Callback(string search);
private T[] Callback(string search);
private List<T> Callback(string search);

If your options are asynchronous (need load from resource/internet etc), use Task/UniTask/Awaitable/IEnumerator of `Dropdown<T> value

private async Task<Dropdown<T>> Callback(string search);
private async UniTask<Dropdown<T>> Callback(string search);
private async Awaitable<Dropdown<T>> Callback(string search);
private async IEnumerator<Dropdown<T>> Callback(string search);

Example:

using SaintsField;

[Serializable]
public struct TopFilm
{
    public string title;
    public int year;

    // Other implemented like IEquatable<TopFilm>
}

// Search as you type
[Chips(nameof(PickFilmWhileTyping))] public TopFilm[] pickFilmWhileTyping;

private IEnumerable<TopFilm> PickFilmWhileTyping(string search)
{
    string searchLow = search.Trim().ToLower();
    foreach (TopFilm topFilm in TopFilms)
    {
        if (topFilm.title.ToLower().Contains(searchLow))
        {
            yield return topFilm;
        }
    }
}

// If your resource need prepare, you can also wait
[Chips(nameof(PickFilmWhileTypingWait))] public TopFilm[] pickFilmWhileTypingWait;

private async Task<Dropdown<TopFilm>> PickFilmWhileTypingWait(string search)
{
    await Task.Delay(2000);  // prepare your resource and wait for the result

    Dropdown<TopFilm> result = new Dropdown<TopFilm>();
    foreach (TopFilm each in PickFilmWhileTyping(search))
    {
        result.Add(each.ToString(), each);
    }

    return result;
}