Tools / UI Kit / Bootstrap / Autocomplete Fields

Autocomplete Fields

Typeahead dropdowns, suggestion lists and async autocomplete inputs.

Basic Autocomplete
Bootstrap 5
Tailwind CSS 
<div class="uk-ac-wrap">
    <input type="text" class="uk-ac-input" value="Boot">
    <div class="uk-ac-dropdown">
        <div class="uk-ac-item uk-ac-active">Bootstrap 5</div>
        <div class="uk-ac-item">Tailwind CSS</div>
    </div>
</div>

<style>
    .uk-ac-wrap { position: relative; }
    .uk-ac-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #1e3a8a;
        border-radius: 0.5rem; outline: none; background: #fff;
        box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15);
    }
    .uk-ac-dropdown {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 0.35rem; z-index: 10;
    }
    .uk-ac-item {
        display: flex; align-items: center; gap: 0.65rem;
        padding: 0.5rem 0.75rem; border-radius: 0.35rem;
        cursor: pointer; font-size: 0.9rem; font-weight: 500; color: #334155;
    }
    .uk-ac-item:hover, .uk-ac-active { background: #f1f5f9; color: #0f172a; }
    .uk-ac-icon { width: 16px; text-align: center; }
</style>
Search with Icon Prefix
<div class="uk-ac-icon-wrap">
    <i class="fas fa-search uk-ac-search-icon"></i>
    <input type="text" class="uk-ac-input-icon" placeholder="Search users...">
</div>

<style>
    .uk-ac-icon-wrap { position: relative; }
    .uk-ac-search-icon {
        position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
        color: #94a3b8; font-size: 0.9rem; pointer-events: none;
    }
    .uk-ac-input-icon {
        width: 100%; padding: 0.6rem 1rem 0.6rem 2.5rem;
        border: 1px solid #cbd5e1; border-radius: 0.5rem;
        outline: none; font-size: 0.95rem; transition: all 0.15s; background: #fff;
    }
    .uk-ac-input-icon:focus {
        border-color: #1e3a8a; box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15);
    }
</style>
User Search with Avatars
Avatar
Jane Cooper
Avatar 
<div class="uk-ac-wrap">
    <input type="text" class="uk-ac-input" placeholder="Search team...">
    <div class="uk-ac-dropdown">
        <div class="uk-ac-item">
            <img src="https://i.pravatar.cc/100?img=1" style="width: 28px; height: 28px; border-radius: 50%;">
            <div>
                <div style="font-weight: 600;">Jane Cooper</div>
                <div style="font-size: 0.75rem; color: #64748b;">[email protected]</div>
            </div>
        </div>
    </div>
</div>

<style>
    .uk-ac-wrap { position: relative; }
    .uk-ac-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; outline: none; background: #fff;
    }
    .uk-ac-input:focus { border-color: #1e3a8a; box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15); }
    .uk-ac-dropdown {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 0.35rem; z-index: 10;
    }
    .uk-ac-item {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.5rem 0.75rem; border-radius: 0.35rem; cursor: pointer;
    }
    .uk-ac-item:hover { background: #f1f5f9; }
</style>
Rich Dropdown with Sections
Recent
Create new document
Open project folder
Settings
Preferences 
<div class="uk-ac-wrap">
    <input type="text" class="uk-ac-input" placeholder="Search commands...">
    <div class="uk-ac-dropdown">
        <div class="uk-ac-group-title">Recent</div>
        <div class="uk-ac-item">Create new document</div>
        <div class="uk-ac-item">Open project folder</div>
        <div class="uk-ac-group-title">Settings</div>
        <div class="uk-ac-item">Preferences</div>
    </div>
</div>

<style>
    .uk-ac-wrap { position: relative; }
    .uk-ac-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; outline: none; background: #fff;
    }
    .uk-ac-input:focus { border-color: #1e3a8a; box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15); }
    .uk-ac-dropdown {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 0.5rem; z-index: 10;
    }
    .uk-ac-group-title {
        font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
        color: #94a3b8; letter-spacing: 0.05em; padding: 0.25rem 0.75rem; margin-bottom: 0.25rem;
    }
    .uk-ac-item {
        display: flex; align-items: center; gap: 0.65rem;
        padding: 0.5rem 0.75rem; border-radius: 0.35rem;
        cursor: pointer; font-size: 0.9rem; color: #334155;
    }
    .uk-ac-item:hover { background: #f1f5f9; color: #0f172a; }
    .uk-ac-icon { width: 16px; text-align: center; }
</style>
Dark Mode Autocomplete
Search result 1
Search result 2
Search result 3
<div class="uk-ac-wrap">
    <input type="text" class="uk-ac-input-dark" placeholder="Search...">
    <div class="uk-ac-dropdown-dark">
        <div class="uk-ac-item-dark">Search result 1</div>
        <div class="uk-ac-item-dark">Search result 2</div>
    </div>
</div>

<style>
    .uk-ac-wrap { position: relative; }
    .uk-ac-input-dark {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #334155;
        border-radius: 0.5rem; outline: none; background: #1e293b; color: #f8fafc;
        transition: all 0.15s;
    }
    .uk-ac-input-dark:focus { border-color: #60a5fa; box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.2); }
    .uk-ac-dropdown-dark {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5); padding: 0.35rem; z-index: 10;
    }
    .uk-ac-item-dark {
        padding: 0.5rem 0.75rem; border-radius: 0.35rem; cursor: pointer;
        font-size: 0.9rem; color: #cbd5e1;
    }
    .uk-ac-item-dark:hover { background: #334155; color: #f8fafc; }
</style>
Loading State
Loading results...
<div class="uk-ac-wrap">
    <div style="position: relative;">
        <input type="text" class="uk-ac-input" value="React">
        <i class="fas fa-circle-notch fa-spin" style="position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: #1e3a8a;"></i>
    </div>
    <div class="uk-ac-dropdown" style="text-align: center; padding: 1rem;">
        <i class="fas fa-circle-notch fa-spin"></i>
        <div>Loading results...</div>
    </div>
</div>

<style>
    .uk-ac-wrap { position: relative; }
    .uk-ac-input {
        width: 100%; padding: 0.6rem 0.875rem; border: 1px solid #cbd5e1;
        border-radius: 0.5rem; outline: none; background: #fff;
    }
    .uk-ac-input:focus { border-color: #1e3a8a; box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.15); }
    .uk-ac-dropdown {
        position: absolute; top: calc(100% + 4px); left: 0; right: 0;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 10;
    }
</style>