BootstrapSearch

Installation

Include Bootstrap 5.3 and FontAwesome, then add bootstrap-search.js at your project:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="path/to/bootstrap-search.js"></script>
            

Examples

const names = [
    { id: 1, name: "Walter White" },
    { id: 2, name: "Jesse Pinkman" },
    { id: 3, name: "Saul Goodman" },
    { id: 4, name: "Gustavo Fring" },
    { id: 5, name: "Skyler White" },
    { id: 6, name: "Hank Schrader" },
    { id: 7, name: "Mike Ehrmantraut" },
    { id: 8, name: "Tuco Salamanca" },
    { id: 9, name: "Lalo Salamanca" },
    { id: 10, name: "Chuck McGill" },
    { id: 11, name: "Luke Skywalker" },
    { id: 12, name: "Darth Vader" },
    { id: 13, name: "Leia Organa" },
    { id: 14, name: "Han Solo" },
    { id: 15, name: "Obi-Wan Kenobi" },
    { id: 16, name: "Yoda" },
    { id: 17, name: "Anakin Skywalker" },
    { id: 18, name: "Cassian Andor" },
    { id: 19, name: "Darth Revan" },
    { id: 20, name: "Baby Yoda" },
    { id: 21, name: "Michael Scott" },
    { id: 22, name: "Dwight Schrute" },
    { id: 23, name: "Jim Halpert" },
    { id: 24, name: "Pam Beesly" },
    { id: 25, name: "Stanley Hudson" },
    { id: 26, name: "Kevin Malone" },
    { id: 27, name: "Angela Martin" },
    { id: 28, name: "Creed Bratton" },
    { id: 29, name: "Oscar Martinez" },
    { id: 30, name: "Gustavo Barros" },
    { id: 31, name: "Lucas Cherez" },
    { id: 32, name: "Squidward" },
    { id: 33, name: "Thanos" },
    { id: 34, name: "Sergio" },
    { id: 35, name: "Uncle Fa" },
    { id: 36, name: "Glupp Shitto"}
]


const ac = new BootstrapSearch(document.getElementById('example3'), {
    data: names,
    inputLabel: 'name',
    dropdownLabel: 'name',
    value: 'id',
    onSelectItem: item => console.log('Selected Local:', item)
});
                        

const ac = new BootstrapSearch(document.getElementById('example1'), {
    remoteData: q => `https://dummyjson.com/users/search?q=${q}`,
    inputLabel: 'firstName',
    dropdownLabel: 'firstName',
    value: 'id',
    resolveData: res => res.users,
    onSelectItem: item => console.log('Selected:', item)
});
                        

const ac = new BootstrapSearch(document.getElementById('example2'), {
    remoteData: q => `https://dummyjson.com/users/search?q=${q}`,
    inputLabel: item => `${item.firstName} ${item.lastName}`,
    dropdownLabel: item => {
        const imgUrl = `https://api.dicebear.com/9.x/pixel-art/svg?seed=${item.id}`;
        return <div class="avatar-label"><img src="${imgUrl}" alt="avatar"/>${item.firstName} ${item.lastName}</div>;
    },
    value: item => item.id,
    resolveData: res => res.users,
    onSelectItem: item => console.log('Selected User:', item)
});
                        

const ac = new BootstrapSearch(document.getElementById('example4'), {
    remoteData: q => `https://dummyjson.com/users/search?q=${q}`,
    inputLabel: 'firstName',
    dropdownLabel: 'firstName',
    value: 'id',
    resolveData: res => res.users,
    multiSelect: true,
    selectedItems: [{ id: "87", firstName: "Hunter" }, {id: "33", firstName: "Carter"}],
    onSelectItem: items => console.log('Selected Items:', items)
});