Pertama tama buat pada bagian route web.php buat route untuk auth-complete-search seperti di code ini

Setelah itu pada file controllers buat “CountriesController” lalu buat code ini

Setelah itu sekarang kita membuat folder baru pada bagian views seperti dibawah ini

Pada bagian index isi code seperti ini

Setelah itu pergi ke web https://tarekraafat.github.io/autoComplete.js/#/installation

Klik pada bagian installation dan salin jsdelivernya script dan cssnya

Script pada bagian script, dan css pada bagian headnya, seperti pada gambar ini

Sekarang masih di web klick pada bagian usage lalu klik skrip dan copy script pada no ke 2

Lalu salin ke pada skrip di indexnya

Kembali ke web sekarang copy configurationnya pada no ke 3 pada bagian advanced

Lalu salin ke bagian config pada script tadi,

Apabila berhasil akan muncul seperti ini

Sekarang masih pada web, pergi ke bagian configuration, lalu filter, lalu klik async

Copy codenya, lalu paste pada bagian data

(perbaikan code  pada bagian script dikarenakan error)

<script>

    const autoCompleteJS = new autoComplete({

        selector: "#autoComplete",

        placeHolder: "Search for Country...",

        data: {

            src: async (query) => {

                try {

                    console.log('Searching for:', query);

                    // Fetch data from API

                    const source = await fetch(`{{ url('auth-complete-search/countries/search') }}/${query}`);

                    const data = await source.json();

                    console.log('API Response:', data);

                    // Transform data to just return array of names

                    return data.map(item => item.name);

                } catch (error) {

                    console.error('Search error:', error);

                    return [];

                }

            },

            cache: false

        },

        threshold: 1,

        debounce: 300,

        searchEngine: "strict",

        resultsList: {

            element: (list, data) => {

                console.log('Results list data:', data);

                if (!data.results.length) {

                    // Create "No Results" message element

                    const message = document.createElement("div");

                    message.setAttribute("class", "no_result");

                    message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;

                    list.prepend(message);

                }

            },

            noResults: true,

            maxResults: 15,

            tabSelect: true

        },

        resultItem: {

            element: (item, data) => {

                // Modify Results Item Style

                item.style = "display: flex; justify-content: space-between;";

                // Modify Results Item Content

                item.innerHTML = `

                <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">

                    ${data.match}

                </span>`;

            },

            highlight: true

        },

        events: {

            input: {

                selection: (event) => {

                    const selection = event.detail.selection.value;

                    autoCompleteJS.input.value = selection;

                    console.log('Selected:', selection);

                }

            }

        }

    });

Apabila sudah seharusnya sudah berhasil untuk malakukan search seperti ini (pastikan kalian sudah mempunyai database nama nama negaranya)