How to create a combo box with auto-completion in Tkinter?

Tkinter Combobox widget is one of the useful widgets to implement dropdown menus in an application. It uses the combination of the Entry widget and ListBox widget on the top of it. We can select menu items by typing the item name (if it exists in the Menu List) in the Entry field. However, sometimes, there might be cases when we need to use autocompletion to select the menu items.

In order to create an auto-completion Combobox, we will create a Listbox first to list out the menus and an Entry widget to display the selected Menu. You can bind the "KeyRelease" event with the entry widget to search for a particular keyword in the list. If the item exists, we will update the Listbox widget.

Example

In this example, we will create two functions such that ?

• A function check(e) will find if the entered item exists in the list or not. If the item matches with the entered keyword, we will update the Entry widget by inserting the particular data.
• A function update(data) will update the Entry box by inserting the value in the Entry widget.

# Import the Required libraries
from tkinter import *
from tkinter import ttk

# Create an instance of tkinter frame or window
win = Tk()

# Set the size of the window
win.geometry("700x350")

# Set the title of the window
win.title("Combobox - TutorialsPoint")

# Update the Entry widget with the selected item in list
def check(e):
    v = entry.get()
    if v == '':
        data = values
    else:
        data = []
        for item in values:
            if v.lower() in item.lower():
                data.append(item)
    update(data)

def update(data):
    # Clear the Combobox
    menu.delete(0, END)
    # Add values to the combobox
    for value in data:
        menu.insert(END, value)

# Function to handle item selection from listbox
def on_select(event):
    selection = menu.curselection()
    if selection:
        entry.delete(0, END)
        entry.insert(0, menu.get(selection[0]))

# Add a Label widget
label = Label(win, text="Demo Combobox Widget", font=('Helvetica', 15, 'bold'), background="green3")
label.pack(padx=10, pady=25)

# Add a Bottom Label
text = Label(win, text="Select a Programming Language")
text.pack(padx=15, pady=20)

# Create an Entry widget
entry = Entry(win, width=35)
entry.pack()
entry.bind('<KeyRelease>', check)

# Create a Listbox widget to display the list of items
menu = Listbox(win, height=8)
menu.pack(pady=10)
menu.bind('<Double-Button-1>', on_select)

# Create a list of all the menu items
values = ['Python', 'C++', 'Java', 'Ruby on Rails', 'Rust',
          'GoLang', 'Objective-C', 'C#', 'PHP', 'Swift', 'JavaScript']

# Add values to our combobox
update(values)

win.mainloop()

How It Works

The auto-completion works through the following mechanism ?

• KeyRelease Event: Every time a key is released in the Entry widget, the check() function is triggered
• Filtering: The function searches through the values list and finds items that contain the entered text (case-insensitive)
• Update Display: The Listbox is cleared and repopulated with matching items
• Selection: Users can double-click on any item in the Listbox to select it

Enhanced Version with Selection Handling

Here's an improved version that handles item selection when clicking on the listbox ?

from tkinter import *
from tkinter import ttk

win = Tk()
win.geometry("700x400")
win.title("Auto-Complete Combobox")

def check(e):
    typed = entry.get()
    if typed == '':
        filtered_data = values
    else:
        filtered_data = []
        for item in values:
            if typed.lower() in item.lower():
                filtered_data.append(item)
    update_listbox(filtered_data)

def update_listbox(data):
    menu.delete(0, END)
    for value in data:
        menu.insert(END, value)

def on_select(event):
    selection = menu.curselection()
    if selection:
        selected_item = menu.get(selection[0])
        entry.delete(0, END)
        entry.insert(0, selected_item)

# Create UI elements
Label(win, text="Programming Language Selector", font=('Arial', 16, 'bold'), bg="lightblue").pack(pady=15)
Label(win, text="Type to search:").pack(pady=5)

entry = Entry(win, width=40, font=('Arial', 12))
entry.pack(pady=10)
entry.bind('<KeyRelease>', check)

menu = Listbox(win, height=10, font=('Arial', 10))
menu.pack(pady=10, fill=X, padx=20)
menu.bind('<Double-Button-1>', on_select)

values = ['Python', 'JavaScript', 'Java', 'C++', 'C#', 'PHP', 'Ruby', 'Go', 'Rust', 'Swift', 'Kotlin', 'TypeScript']

update_listbox(values)
win.mainloop()

Output

Running the above Python script will display a window with an Entry widget and a ListBox. Whenever we enter a keyword, it will update the ListBox widget showing the results that match with the entered keyword. Double-clicking on any item will select it in the Entry field.

Key Features

• Real-time Filtering: The listbox updates as you type
• Case-insensitive Search: Matches items regardless of case
• Double-click Selection: Click any item to select it
• Complete Reset: Clear the entry to see all items again

Conclusion

Creating an auto-completion combobox in Tkinter involves binding the KeyRelease event to filter a listbox based on user input. The combination of Entry and Listbox widgets provides an effective dropdown with search functionality for better user experience.