Pole automatického návrhu

Pomocí pole Automatické návrhy zadejte seznam návrhů, ze které si uživatel může vybrat při psaní.

Je to správná kontrola?

Pokud chcete jednoduchý, přizpůsobitelný ovládací prvek, který umožňuje hledání textu se seznamem návrhů, zvolte pole s automatickým návrhem.

Další informace o výběru správného ovládacího prvku textu najdete v článku Ovládací prvky textu .

Anatomie

Vstupní bod pro pole automatického návrhu se skládá z volitelného záhlaví a textového pole s volitelným textem nápovědy:

Seznam výsledků automatického návrhu se vyplní automaticky, jakmile uživatel začne zadávat text. Seznam výsledků se může zobrazit nad nebo pod textovým polem pro zadání. Zobrazí se tlačítko Vymazat vše:

Recommendations

• Při použití pole automatického návrhu k provádění hledání a neexistují žádné výsledky hledání pro zadaný text, zobrazte v výsledku jednořádkovou zprávu "Žádné výsledky", aby uživatelé věděli, že se spustila žádost o hledání:

  výsledků hledání

Vytvoření pole s automatickým návrhem

• Důležitá rozhraní API:třída AutoSuggestBox, událost TextChanged, událost SuggestionChosen, událost QuerySubmitted

Otevřete aplikaci Galerie WinUI 3 a podívejte se na akci AutoSuggestBox.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Pokud chcete použít autoSuggestBox, musíte reagovat na 3 uživatelské akce.

• Změna textu – Když uživatel zadá text, aktualizujte seznam návrhů.
• Vybraný návrh – když uživatel vybere návrh v seznamu návrhů, aktualizujte textové pole.
• Dotaz byl odeslán – když uživatel odešle dotaz, zobrazte výsledky dotazu.

Změna textu

Událost TextChanged nastane při každé aktualizaci obsahu textového pole. Pomocí argumentů události vlastnost Reason abyste určili, zda byla změna způsobena uživatelským vstupem. Pokud je důvodem změny UserInput, vyfiltrujte data na základě vstupu. Potom nastavte filtrovaná data jako ItemsSource do AutoSuggestBox a aktualizujte seznam návrhů.

K řízení způsobu zobrazení položek v seznamu návrhů můžete použít DisplayMemberPath nebo ItemTemplate.

• Chcete-li zobrazit text jedné vlastnosti datové položky, nastavte Vlastnost DisplayMemberPath na výběr, která vlastnost z objektu se má zobrazit v seznamu návrhů.
• Chcete-li definovat vlastní vyhledávání pro každou položku v seznamu, použijte ItemTemplate vlastnost.

Vybraný návrh

Když uživatel prochází seznam návrhů pomocí klávesnice, musíte text v textovém poli aktualizovat tak, aby odpovídal.

Můžete nastavit vlastnost TextMemberPath, abyste zvolili, která vlastnost z datového objektu se má zobrazit v textovém poli. Pokud zadáte TextMemberPath, textové pole se automaticky aktualizuje. Obvykle byste měli zadat stejnou hodnotu pro DisplayMemberPath a TextMemberPath, takže text je stejný v seznamu návrhů a textovém poli.

Pokud potřebujete zobrazit více než jednoduchou vlastnost, zpracujte událost SuggestionChosen , která naplní textové pole vlastním textem na základě vybrané položky.

Dotaz byl odeslán.

Zpracujte událost QuerySubmitted a proveďte akci dotazu odpovídající vaší aplikaci a zobrazte výsledek uživateli.

Událost QuerySubmitted nastane, když uživatel potvrdí řetězec dotazu. Uživatel může dotaz potvrdit jedním z těchto způsobů:

• Když je fokus v textovém poli, stiskněte Enter nebo klikněte na ikonu dotazu. Událost args ChosenSuggestion vlastnost je null.
• Když je fokus v seznamu návrhů, stiskněte Enter, klikněte nebo klepněte na položku. Událost args SelectedSuggestion vlastnost obsahuje položku, která byla vybrána ze seznamu.

Ve všech případech obsahuje vlastnost args QueryText text z textového pole.

Tady je jednoduchý autoSuggestBox s požadovanými obslužnými rutinami událostí.

<AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200"
                TextChanged="AutoSuggestBox_TextChanged"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted"
                SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>

private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    // Only get results when it was a user typing,
    // otherwise assume the value got filled in by TextMemberPath
    // or the handler for SuggestionChosen.
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        //Set the ItemsSource to be your filtered dataset
        //sender.ItemsSource = dataset;
    }
}


private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{
    // Set sender.Text. You can use args.SelectedItem to build your text string.
}


private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{
    if (args.ChosenSuggestion != null)
    {
        // User selected an item from the suggestion list, take an action on it here.
    }
    else
    {
        // Use args.QueryText to determine what to do.
    }
}

Použití autoSuggestBoxu pro vyhledávání

Pomocí pole Automatické návrhy zadejte seznam návrhů, ze které si uživatel může vybrat při psaní.

Ve výchozím nastavení textové pole neobsahuje tlačítko dotazu. Vlastnost QueryIcon můžete nastavit tak, aby se na pravé straně textového pole přidalo tlačítko se zadanou ikonou. Pokud například chcete, aby pole Automatické návrhy vypadalo jako typické vyhledávací pole, přidejte ikonu najít, například takto.

<AutoSuggestBox QueryIcon="Find"/>

Tady je AutoSuggestBox s ikonou pro vyhledávání.

Související články

• ovládací prvky textu
• Kontrolu pravopisu
• Třída TextBox
• Windows.UI.Xaml.Controls PasswordBox třída
• vlastnost délky řetězce String.Length