Basic

<input id="autoComplete" class="form-control">
const autoCompleteJS = new autoComplete({
    selector: "#autoComplete",
    placeHolder: "Search Country Code",
    data: {
        src: [
            "+93 - Afghanistan",
            "+358 - Aland Islands",
            "+355 - Albania",
            "+213 - Algeria",
            "+1684 - American Samoa",
            "+376 - Andorra",
            "+244 - Angola",
            "+1264 - Anguilla",
            "+672 - Antarctica",
            "+1268 - Antigua and Barbuda",
            "+54 - Argentina",
            "+374 - Armenia",
            "+297 - Aruba",
            "+61 - Australia",
            "+43 - Austria",
            "+994 - Azerbaijan",
            "+1242 - Bahamas",
            "+973 - Bahrain",
            "+880 - Bangladesh",
            "+1246 - Barbados",
            "+375 - Belarus",
            "+32 - Belgium",
            "+501 - Belize",
            "+229 - Benin",
            "+1441 - Bermuda",
            "+975 - Bhutan",
            "+591 - Bolivia",
            "+599 - Bonaire, Sint Eustatius and Saba",
            "+387 - Bosnia and Herzegovina",
            "+267 - Botswana",
            "+55 - Bouvet Island",
            "+55 - Brazil",
            "+246 - British Indian Ocean Territory",
            "+673 - Brunei Darussalam",
            "+359 - Bulgaria",
            "+226 - Burkina Faso",
            "+257 - Burundi",
            "+855 - Cambodia",
            "+237 - Cameroon",
            "+1 - Canada",
            "+238 - Cape Verde",
            "+1345 - Cayman Islands",
            "+236 - Central African Republic",
            "+235 - Chad",
            "+56 - Chile",
            "+86 - China",
            "+61 - Christmas Island",
            "+672 - Cocos (Keeling) Islands",
            "+57 - Colombia",
            "+269 - Comoros",
            "+242 - Congo",
            "+242 - Congo, Democratic Republic of the Congo",
            "+682 - Cook Islands",
            "+506 - Costa Rica",
            "+225 - Cote D'Ivoire",
            "+385 - Croatia",
            "+53 - Cuba",
            "+599 - Curacao",
            "+357 - Cyprus",
            "+420 - Czech Republic",
            "+45 - Denmark",
            "+253 - Djibouti",
            "+1767 - Dominica",
            "+1809 - Dominican Republic",
            "+593 - Ecuador",
            "+20 - Egypt",
            "+503 - El Salvador",
            "+240 - Equatorial Guinea",
            "+291 - Eritrea",
            "+372 - Estonia",
            "+251 - Ethiopia",
            "+500 - Falkland Islands (Malvinas)",
            "+298 - Faroe Islands",
            "+679 - Fiji",
            "+358 - Finland",
            "+33 - France",
            "+594 - French Guiana",
            "+689 - French Polynesia",
            "+262 - French Southern Territories",
            "+241 - Gabon",
            "+220 - Gambia",
            "+995 - Georgia",
            "+49 - Germany",
            "+233 - Ghana",
            "+350 - Gibraltar",
            "+30 - Greece",
            "+299 - Greenland",
            "+1473 - Grenada",
            "+590 - Guadeloupe",
            "+1671 - Guam",
            "+502 - Guatemala",
            "+44 - Guernsey",
            "+224 - Guinea",
            "+245 - Guinea-Bissau",
            "+592 - Guyana",
            "+509 - Haiti",
            "+0 - Heard Island and Mcdonald Islands",
            "+39 - Holy See (Vatican City State)",
            "+504 - Honduras",
            "+852 - Hong Kong",
            "+36 - Hungary",
            "+354 - Iceland",
            "+91 - India",
            "+62 - Indonesia",
            "+98 - Iran, Islamic Republic of",
            "+964 - Iraq",
            "+353 - Ireland",
            "+44 - Isle of Man",
            "+972 - Israel",
            "+39 - Italy",
            "+1876 - Jamaica",
            "+81 - Japan",
            "+44 - Jersey",
            "+962 - Jordan",
            "+7 - Kazakhstan",
            "+254 - Kenya",
            "+686 - Kiribati",
            "+850 - Korea, Democratic People's Republic of",
            "+82 - Korea, Republic of",
            "+381 - Kosovo",
            "+965 - Kuwait",
            "+996 - Kyrgyzstan",
            "+856 - Lao People's Democratic Republic",
            "+371 - Latvia",
            "+961 - Lebanon",
            "+266 - Lesotho",
            "+231 - Liberia",
            "+218 - Libyan Arab Jamahiriya",
            "+423 - Liechtenstein",
            "+370 - Lithuania",
            "+352 - Luxembourg",
            "+853 - Macao",
            "+389 - Macedonia, the Former Yugoslav Republic of",
            "+261 - Madagascar",
            "+265 - Malawi",
            "+60 - Malaysia",
            "+960 - Maldives",
            "+223 - Mali",
            "+356 - Malta",
            "+692 - Marshall Islands",
            "+596 - Martinique",
            "+222 - Mauritania",
            "+230 - Mauritius",
            "+269 - Mayotte",
            "+52 - Mexico",
            "+691 - Micronesia, Federated States of",
            "+373 - Moldova, Republic of",
            "+377 - Monaco",
            "+976 - Mongolia",
            "+382 - Montenegro",
            "+1664 - Montserrat",
            "+212 - Morocco",
            "+258 - Mozambique",
            "+95 - Myanmar",
            "+264 - Namibia",
            "+674 - Nauru",
            "+977 - Nepal",
            "+31 - Netherlands",
            "+599 - Netherlands Antilles",
            "+687 - New Caledonia",
            "+64 - New Zealand",
            "+505 - Nicaragua",
            "+227 - Niger",
            "+234 - Nigeria",
            "+683 - Niue",
            "+672 - Norfolk Island",
            "+1670 - Northern Mariana Islands",
            "+47 - Norway",
            "+968 - Oman",
            "+92 - Pakistan",
            "+680 - Palau",
            "+970 - Palestinian Territory, Occupied",
            "+507 - Panama",
            "+675 - Papua New Guinea",
            "+595 - Paraguay",
            "+51 - Peru",
            "+63 - Philippines",
            "+64 - Pitcairn",
            "+48 - Poland",
            "+351 - Portugal",
            "+1787 - Puerto Rico",
            "+974 - Qatar",
            "+262 - Reunion",
            "+40 - Romania",
            "+70 - Russian Federation",
            "+250 - Rwanda",
            "+590 - Saint Barthelemy",
            "+290 - Saint Helena",
            "+1869 - Saint Kitts and Nevis",
            "+1758 - Saint Lucia",
            "+590 - Saint Martin",
            "+508 - Saint Pierre and Miquelon",
            "+1784 - Saint Vincent and the Grenadines",
            "+684 - Samoa",
            "+378 - San Marino",
            "+239 - Sao Tome and Principe",
            "+966 - Saudi Arabia",
            "+221 - Senegal",
            "+381 - Serbia",
            "+381 - Serbia and Montenegro",
            "+248 - Seychelles",
            "+232 - Sierra Leone",
            "+65 - Singapore",
            "+1 - Sint Maarten",
            "+421 - Slovakia",
            "+386 - Slovenia",
            "+677 - Solomon Islands",
            "+252 - Somalia",
            "+27 - South Africa",
            "+500 - South Georgia and the South Sandwich Islands",
            "+211 - South Sudan",
            "+34 - Spain",
            "+94 - Sri Lanka",
            "+249 - Sudan",
            "+597 - Suriname",
            "+47 - Svalbard and Jan Mayen",
            "+268 - Swaziland",
            "+46 - Sweden",
            "+41 - Switzerland",
            "+963 - Syrian Arab Republic",
            "+886 - Taiwan, Province of China",
            "+992 - Tajikistan",
            "+255 - Tanzania, United Republic of",
            "+66 - Thailand",
            "+670 - Timor-Leste",
            "+228 - Togo",
            "+690 - Tokelau",
            "+676 - Tonga",
            "+1868 - Trinidad and Tobago",
            "+216 - Tunisia",
            "+90 - Turkey",
            "+7370 - Turkmenistan",
            "+1649 - Turks and Caicos Islands",
            "+688 - Tuvalu",
            "+256 - Uganda",
            "+380 - Ukraine",
            "+971 - United Arab Emirates",
            "+44 - United Kingdom",
            "+1 - United States",
            "+1 - United States Minor Outlying Islands",
            "+598 - Uruguay",
            "+998 - Uzbekistan",
            "+678 - Vanuatu",
            "+58 - Venezuela",
            "+84 - Viet Nam",
            "+1284 - Virgin Islands, British",
            "+1340 - Virgin Islands, U.s.",
            "+681 - Wallis and Futuna",
            "+212 - Western Sahara",
            "+967 - Yemen",
            "+260 - Zambia",
            "+263 - Zimbabwe"
        ],
        cache: true,
    },
    resultsList: {
        element: (list, data) => {
            if (!data.results.length) {
                // Create "No Results" message element
                const message = document.createElement("div");
                // Add class to the created element
                message.setAttribute("class", "no_result");
                // Add message text content
                message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;
                // Append message element to the results list
                list.prepend(message);
            }
        },
        noResults: true,
    },
    resultItem: {
        highlight: {
            render: true
        }
    },
    events: {
        input: {
            focus() {
            if (autoCompleteJS.input.value.length) autoCompleteJS.start();
            },
            selection(event) {
            const feedback = event.detail;
            // Prepare User's Selected Value
            const selection = feedback.selection.value;
            
            // Replace Input value with the selected value
            autoCompleteJS.input.value = selection;
            },
        },
    },
});

Search with Button

<div class="autocomplete-btn">
    <input id="example2" class="form-control">
    <button class="btn btn-primary">Search</button>
</div>
const example2 = new autoComplete({
    selector: "#example2",
    placeHolder: "Enter Country Code",
    data: {
        src: [
            "+93 - Afghanistan",
            "+358 - Aland Islands",
            "+355 - Albania",
            "+213 - Algeria",
            "+1684 - American Samoa",
            "+376 - Andorra",
            "+244 - Angola",
            "+1264 - Anguilla",
            "+672 - Antarctica",
            "+1268 - Antigua and Barbuda",
            "+54 - Argentina",
            "+374 - Armenia",
            "+297 - Aruba",
            "+61 - Australia",
            "+43 - Austria",
            "+994 - Azerbaijan",
            "+1242 - Bahamas",
            "+973 - Bahrain",
            "+880 - Bangladesh",
            "+1246 - Barbados",
            "+375 - Belarus",
            "+32 - Belgium",
            "+501 - Belize",
            "+229 - Benin",
            "+1441 - Bermuda",
            "+975 - Bhutan",
            "+591 - Bolivia",
            "+599 - Bonaire, Sint Eustatius and Saba",
            "+387 - Bosnia and Herzegovina",
            "+267 - Botswana",
            "+55 - Bouvet Island",
            "+55 - Brazil",
            "+246 - British Indian Ocean Territory",
            "+673 - Brunei Darussalam",
            "+359 - Bulgaria",
            "+226 - Burkina Faso",
            "+257 - Burundi",
            "+855 - Cambodia",
            "+237 - Cameroon",
            "+1 - Canada",
            "+238 - Cape Verde",
            "+1345 - Cayman Islands",
            "+236 - Central African Republic",
            "+235 - Chad",
            "+56 - Chile",
            "+86 - China",
            "+61 - Christmas Island",
            "+672 - Cocos (Keeling) Islands",
            "+57 - Colombia",
            "+269 - Comoros",
            "+242 - Congo",
            "+242 - Congo, Democratic Republic of the Congo",
            "+682 - Cook Islands",
            "+506 - Costa Rica",
            "+225 - Cote D'Ivoire",
            "+385 - Croatia",
            "+53 - Cuba",
            "+599 - Curacao",
            "+357 - Cyprus",
            "+420 - Czech Republic",
            "+45 - Denmark",
            "+253 - Djibouti",
            "+1767 - Dominica",
            "+1809 - Dominican Republic",
            "+593 - Ecuador",
            "+20 - Egypt",
            "+503 - El Salvador",
            "+240 - Equatorial Guinea",
            "+291 - Eritrea",
            "+372 - Estonia",
            "+251 - Ethiopia",
            "+500 - Falkland Islands (Malvinas)",
            "+298 - Faroe Islands",
            "+679 - Fiji",
            "+358 - Finland",
            "+33 - France",
            "+594 - French Guiana",
            "+689 - French Polynesia",
            "+262 - French Southern Territories",
            "+241 - Gabon",
            "+220 - Gambia",
            "+995 - Georgia",
            "+49 - Germany",
            "+233 - Ghana",
            "+350 - Gibraltar",
            "+30 - Greece",
            "+299 - Greenland",
            "+1473 - Grenada",
            "+590 - Guadeloupe",
            "+1671 - Guam",
            "+502 - Guatemala",
            "+44 - Guernsey",
            "+224 - Guinea",
            "+245 - Guinea-Bissau",
            "+592 - Guyana",
            "+509 - Haiti",
            "+0 - Heard Island and Mcdonald Islands",
            "+39 - Holy See (Vatican City State)",
            "+504 - Honduras",
            "+852 - Hong Kong",
            "+36 - Hungary",
            "+354 - Iceland",
            "+91 - India",
            "+62 - Indonesia",
            "+98 - Iran, Islamic Republic of",
            "+964 - Iraq",
            "+353 - Ireland",
            "+44 - Isle of Man",
            "+972 - Israel",
            "+39 - Italy",
            "+1876 - Jamaica",
            "+81 - Japan",
            "+44 - Jersey",
            "+962 - Jordan",
            "+7 - Kazakhstan",
            "+254 - Kenya",
            "+686 - Kiribati",
            "+850 - Korea, Democratic People's Republic of",
            "+82 - Korea, Republic of",
            "+381 - Kosovo",
            "+965 - Kuwait",
            "+996 - Kyrgyzstan",
            "+856 - Lao People's Democratic Republic",
            "+371 - Latvia",
            "+961 - Lebanon",
            "+266 - Lesotho",
            "+231 - Liberia",
            "+218 - Libyan Arab Jamahiriya",
            "+423 - Liechtenstein",
            "+370 - Lithuania",
            "+352 - Luxembourg",
            "+853 - Macao",
            "+389 - Macedonia, the Former Yugoslav Republic of",
            "+261 - Madagascar",
            "+265 - Malawi",
            "+60 - Malaysia",
            "+960 - Maldives",
            "+223 - Mali",
            "+356 - Malta",
            "+692 - Marshall Islands",
            "+596 - Martinique",
            "+222 - Mauritania",
            "+230 - Mauritius",
            "+269 - Mayotte",
            "+52 - Mexico",
            "+691 - Micronesia, Federated States of",
            "+373 - Moldova, Republic of",
            "+377 - Monaco",
            "+976 - Mongolia",
            "+382 - Montenegro",
            "+1664 - Montserrat",
            "+212 - Morocco",
            "+258 - Mozambique",
            "+95 - Myanmar",
            "+264 - Namibia",
            "+674 - Nauru",
            "+977 - Nepal",
            "+31 - Netherlands",
            "+599 - Netherlands Antilles",
            "+687 - New Caledonia",
            "+64 - New Zealand",
            "+505 - Nicaragua",
            "+227 - Niger",
            "+234 - Nigeria",
            "+683 - Niue",
            "+672 - Norfolk Island",
            "+1670 - Northern Mariana Islands",
            "+47 - Norway",
            "+968 - Oman",
            "+92 - Pakistan",
            "+680 - Palau",
            "+970 - Palestinian Territory, Occupied",
            "+507 - Panama",
            "+675 - Papua New Guinea",
            "+595 - Paraguay",
            "+51 - Peru",
            "+63 - Philippines",
            "+64 - Pitcairn",
            "+48 - Poland",
            "+351 - Portugal",
            "+1787 - Puerto Rico",
            "+974 - Qatar",
            "+262 - Reunion",
            "+40 - Romania",
            "+70 - Russian Federation",
            "+250 - Rwanda",
            "+590 - Saint Barthelemy",
            "+290 - Saint Helena",
            "+1869 - Saint Kitts and Nevis",
            "+1758 - Saint Lucia",
            "+590 - Saint Martin",
            "+508 - Saint Pierre and Miquelon",
            "+1784 - Saint Vincent and the Grenadines",
            "+684 - Samoa",
            "+378 - San Marino",
            "+239 - Sao Tome and Principe",
            "+966 - Saudi Arabia",
            "+221 - Senegal",
            "+381 - Serbia",
            "+381 - Serbia and Montenegro",
            "+248 - Seychelles",
            "+232 - Sierra Leone",
            "+65 - Singapore",
            "+1 - Sint Maarten",
            "+421 - Slovakia",
            "+386 - Slovenia",
            "+677 - Solomon Islands",
            "+252 - Somalia",
            "+27 - South Africa",
            "+500 - South Georgia and the South Sandwich Islands",
            "+211 - South Sudan",
            "+34 - Spain",
            "+94 - Sri Lanka",
            "+249 - Sudan",
            "+597 - Suriname",
            "+47 - Svalbard and Jan Mayen",
            "+268 - Swaziland",
            "+46 - Sweden",
            "+41 - Switzerland",
            "+963 - Syrian Arab Republic",
            "+886 - Taiwan, Province of China",
            "+992 - Tajikistan",
            "+255 - Tanzania, United Republic of",
            "+66 - Thailand",
            "+670 - Timor-Leste",
            "+228 - Togo",
            "+690 - Tokelau",
            "+676 - Tonga",
            "+1868 - Trinidad and Tobago",
            "+216 - Tunisia",
            "+90 - Turkey",
            "+7370 - Turkmenistan",
            "+1649 - Turks and Caicos Islands",
            "+688 - Tuvalu",
            "+256 - Uganda",
            "+380 - Ukraine",
            "+971 - United Arab Emirates",
            "+44 - United Kingdom",
            "+1 - United States",
            "+1 - United States Minor Outlying Islands",
            "+598 - Uruguay",
            "+998 - Uzbekistan",
            "+678 - Vanuatu",
            "+58 - Venezuela",
            "+84 - Viet Nam",
            "+1284 - Virgin Islands, British",
            "+1340 - Virgin Islands, U.s.",
            "+681 - Wallis and Futuna",
            "+212 - Western Sahara",
            "+967 - Yemen",
            "+260 - Zambia",
            "+263 - Zimbabwe"
        ],
        cache: true,
    },
    resultsList: {
        element: (list, data) => {
            if (!data.results.length) {
                // Create "No Results" message element
                const message = document.createElement("div");
                // Add class to the created element
                message.setAttribute("class", "no_result");
                // Add message text content
                message.innerHTML = `<span>Found No Results for "${data.query}"</span>`;
                // Append message element to the results list
                list.prepend(message);
            }
        },
        noResults: true,
    },
    resultItem: {
        highlight: {
            render: true
        }
    },
    events: {
        input: {
            focus() {
            if (example2.input.value.length) example2.start();
            },
            selection(event) {
            const feedback = event.detail;
            // Prepare User's Selected Value
            const selection = feedback.selection.value;
            
            // Replace Input value with the selected value
            example2.input.value = selection;
            },
        },
    },
});