1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
"""Two column dropdown example with simple styling on the prefix."""
from textual.app import App, ComposeResult
from textual.content import Content
from textual.widgets import Input, Label
from textual_autocomplete import AutoComplete, DropdownItem
# Languages with their popularity rank
LANGUAGES_WITH_RANK = [
(1, "Python"),
(2, "JavaScript"),
(3, "Java"),
(4, "C++"),
(5, "TypeScript"),
(6, "Go"),
(7, "Ruby"),
(8, "Rust"),
]
# Create dropdown items with two columns: rank and language name
CANDIDATES = [
DropdownItem(
language, # Main text to be completed
prefix=Content.from_markup(
f"[$text-primary on $primary-muted] {rank} "
), # Prefix showing rank, styled with Textual markup!
)
for rank, language in LANGUAGES_WITH_RANK
]
class TwoColumnAutoCompleteExample(App[None]):
def compose(self) -> ComposeResult:
yield Label("Start typing a programming language:")
text_input = Input(placeholder="Type here...")
yield text_input
yield AutoComplete(
target=text_input, # The widget to attach autocomplete to
candidates=CANDIDATES, # The list of completion candidates
)
if __name__ == "__main__":
app = TwoColumnAutoCompleteExample()
app.run()
|
