JavaScript autocomplete dropdown with images
The javascript autocomplete
countries dropdown is a real life example using JSON and a CDN images that works great in small screen devices.
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <div id="dropdown"></div> <script> var countries = [ { "text": "Afghanistan", "value": "AF" }, { "text": "Åland Islands", "value": "AX" }, { "text": "Albania", "value": "AL" }, { "text": "Algeria", "value": "DZ" }, { "text": "American Samoa", "value": "AS" }, { "text": "Andorra", "value": "AD" }, { "text": "Angola", "value": "AO" }, { "text": "Anguilla", "value": "AI" }, { "text": "Antarctica", "value": "AQ" }, { "text": "Antigua and Barbuda", "value": "AG" }, { "text": "Argentina", "value": "AR" }, { "text": "Armenia", "value": "AM" }, { "text": "Aruba", "value": "AW" }, { "text": "Australia", "value": "AU" }, { "text": "Austria", "value": "AT" }, { "text": "Azerbaijan", "value": "AZ" }, { "text": "Bahamas", "value": "BS" }, { "text": "Bahrain", "value": "BH" }, { "text": "Bangladesh", "value": "BD" }, { "text": "Barbados", "value": "BB" }, { "text": "Belarus", "value": "BY" }, { "text": "Belgium", "value": "BE" }, { "text": "Belize", "value": "BZ" }, { "text": "Benin", "value": "BJ" }, { "text": "Bermuda", "value": "BM" }, { "text": "Bhutan", "value": "BT" }, { "text": "Bolivia", "value": "BO" }, { "text": "Bosnia and Herzegovina", "value": "BA" }, { "text": "Botswana", "value": "BW" }, { "text": "Bouvet Island", "value": "BV" }, { "text": "Brazil", "value": "BR" }, { "text": "British Indian Ocean Territory", "value": "IO" }, { "text": "Brunei Darussalam", "value": "BN" }, { "text": "Bulgaria", "value": "BG" }, { "text": "Burkina Faso", "value": "BF" }, { "text": "Burundi", "value": "BI" }, { "text": "Cambodia", "value": "KH" }, { "text": "Cameroon", "value": "CM" }, { "text": "Canada", "value": "CA" }, { "text": "Cape Verde", "value": "CV" }, { "text": "Cayman Islands", "value": "KY" }, { "text": "Central African Republic", "value": "CF" }, { "text": "Chad", "value": "TD" }, { "text": "Chile", "value": "CL" }, { "text": "China", "value": "CN" }, { "text": "Christmas Island", "value": "CX" }, { "text": "Cocos (Keeling) Islands", "value": "CC" }, { "text": "Colombia", "value": "CO" }, { "text": "Comoros", "value": "KM" }, { "text": "Congo", "value": "CG" }, { "text": "Congo, The Democratic Republic of the", "value": "CD" }, { "text": "Cook Islands", "value": "CK" }, { "text": "Costa Rica", "value": "CR" }, { "text": "Cote D'Ivoire", "value": "CI" }, { "text": "Croatia", "value": "HR" }, { "text": "Cuba", "value": "CU" }, { "text": "Cyprus", "value": "CY" }, { "text": "Czech Republic", "value": "CZ" }, { "text": "Denmark", "value": "DK" }, { "text": "Djibouti", "value": "DJ" }, { "text": "Dominica", "value": "DM" }, { "text": "Dominican Republic", "value": "DO" }, { "text": "Ecuador", "value": "EC" }, { "text": "Egypt", "value": "EG" }, { "text": "El Salvador", "value": "SV" }, { "text": "Equatorial Guinea", "value": "GQ" }, { "text": "Eritrea", "value": "ER" }, { "text": "Estonia", "value": "EE" }, { "text": "Ethiopia", "value": "ET" }, { "text": "Falkland Islands (Malvinas)", "value": "FK" }, { "text": "Faroe Islands", "value": "FO" }, { "text": "Fiji", "value": "FJ" }, { "text": "Finland", "value": "FI" }, { "text": "France", "value": "FR" }, { "text": "French Guiana", "value": "GF" }, { "text": "French Polynesia", "value": "PF" }, { "text": "French Southern Territories", "value": "TF" }, { "text": "Gabon", "value": "GA" }, { "text": "Gambia", "value": "GM" }, { "text": "Georgia", "value": "GE" }, { "text": "Germany", "value": "DE" }, { "text": "Ghana", "value": "GH" }, { "text": "Gibraltar", "value": "GI" }, { "text": "Greece", "value": "GR" }, { "text": "Greenland", "value": "GL" }, { "text": "Grenada", "value": "GD" }, { "text": "Guadeloupe", "value": "GP" }, { "text": "Guam", "value": "GU" }, { "text": "Guatemala", "value": "GT" }, { "text": "Guernsey", "value": "GG" }, { "text": "Guinea", "value": "GN" }, { "text": "Guinea-Bissau", "value": "GW" }, { "text": "Guyana", "value": "GY" }, { "text": "Haiti", "value": "HT" }, { "text": "Heard Island and Mcdonald Islands", "value": "HM" }, { "text": "Holy See (Vatican City State)", "value": "VA" }, { "text": "Honduras", "value": "HN" }, { "text": "Hong Kong", "value": "HK" }, { "text": "Hungary", "value": "HU" }, { "text": "Iceland", "value": "IS" }, { "text": "India", "value": "IN" }, { "text": "Indonesia", "value": "ID" }, { "text": "Iran, Islamic Republic Of", "value": "IR" }, { "text": "Iraq", "value": "IQ" }, { "text": "Ireland", "value": "IE" }, { "text": "Isle of Man", "value": "IM" }, { "text": "Israel", "value": "IL" }, { "text": "Italy", "value": "IT" }, { "text": "Jamaica", "value": "JM" }, { "text": "Japan", "value": "JP" }, { "text": "Jersey", "value": "JE" }, { "text": "Jordan", "value": "JO" }, { "text": "Kazakhstan", "value": "KZ" }, { "text": "Kenya", "value": "KE" }, { "text": "Kiribati", "value": "KI" }, { "text": "Korea, Democratic People'S Republic of", "value": "KP" }, { "text": "Korea, Republic of", "value": "KR" }, { "text": "Kuwait", "value": "KW" }, { "text": "Kyrgyzstan", "value": "KG" }, { "text": "Lao People'S Democratic Republic", "value": "LA" }, { "text": "Latvia", "value": "LV" }, { "text": "Lebanon", "value": "LB" }, { "text": "Lesotho", "value": "LS" }, { "text": "Liberia", "value": "LR" }, { "text": "Libyan Arab Jamahiriya", "value": "LY" }, { "text": "Liechtenstein", "value": "LI" }, { "text": "Lithuania", "value": "LT" }, { "text": "Luxembourg", "value": "LU" }, { "text": "Macao", "value": "MO" }, { "text": "Macedonia, The Former Yugoslav Republic of", "value": "MK" }, { "text": "Madagascar", "value": "MG" }, { "text": "Malawi", "value": "MW" }, { "text": "Malaysia", "value": "MY" }, { "text": "Maldives", "value": "MV" }, { "text": "Mali", "value": "ML" }, { "text": "Malta", "value": "MT" }, { "text": "Marshall Islands", "value": "MH" }, { "text": "Martinique", "value": "MQ" }, { "text": "Mauritania", "value": "MR" }, { "text": "Mauritius", "value": "MU" }, { "text": "Mayotte", "value": "YT" }, { "text": "Mexico", "value": "MX" }, { "text": "Micronesia, Federated States of", "value": "FM" }, { "text": "Moldova, Republic of", "value": "MD" }, { "text": "Monaco", "value": "MC" }, { "text": "Mongolia", "value": "MN" }, { "text": "Montserrat", "value": "MS" }, { "text": "Morocco", "value": "MA" }, { "text": "Mozambique", "value": "MZ" }, { "text": "Myanmar", "value": "MM" }, { "text": "Namibia", "value": "NA" }, { "text": "Nauru", "value": "NR" }, { "text": "Nepal", "value": "NP" }, { "text": "Netherlands", "value": "NL" }, { "text": "Netherlands Antilles", "value": "AN" }, { "text": "New Caledonia", "value": "NC" }, { "text": "New Zealand", "value": "NZ" }, { "text": "Nicaragua", "value": "NI" }, { "text": "Niger", "value": "NE" }, { "text": "Nigeria", "value": "NG" }, { "text": "Niue", "value": "NU" }, { "text": "Norfolk Island", "value": "NF" }, { "text": "Northern Mariana Islands", "value": "MP" }, { "text": "Norway", "value": "NO" }, { "text": "Oman", "value": "OM" }, { "text": "Pakistan", "value": "PK" }, { "text": "Palau", "value": "PW" }, { "text": "Palestinian Territory, Occupied", "value": "PS" }, { "text": "Panama", "value": "PA" }, { "text": "Papua New Guinea", "value": "PG" }, { "text": "Paraguay", "value": "PY" }, { "text": "Peru", "value": "PE" }, { "text": "Philippines", "value": "PH" }, { "text": "Pitcairn", "value": "PN" }, { "text": "Poland", "value": "PL" }, { "text": "Portugal", "value": "PT" }, { "text": "Puerto Rico", "value": "PR" }, { "text": "Qatar", "value": "QA" }, { "text": "Reunion", "value": "RE" }, { "text": "Romania", "value": "RO" }, { "text": "Russian Federation", "value": "RU" }, { "text": "RWANDA", "value": "RW" }, { "text": "Saint Helena", "value": "SH" }, { "text": "Saint Kitts and Nevis", "value": "KN" }, { "text": "Saint Lucia", "value": "LC" }, { "text": "Saint Pierre and Miquelon", "value": "PM" }, { "text": "Saint Vincent and the Grenadines", "value": "VC" }, { "text": "Samoa", "value": "WS" }, { "text": "San Marino", "value": "SM" }, { "text": "Sao Tome and Principe", "value": "ST" }, { "text": "Saudi Arabia", "value": "SA" }, { "text": "Senegal", "value": "SN" }, { "text": "Serbia and Montenegro", "value": "CS" }, { "text": "Seychelles", "value": "SC" }, { "text": "Sierra Leone", "value": "SL" }, { "text": "Singapore", "value": "SG" }, { "text": "Slovakia", "value": "SK" }, { "text": "Slovenia", "value": "SI" }, { "text": "Solomon Islands", "value": "SB" }, { "text": "Somalia", "value": "SO" }, { "text": "South Africa", "value": "ZA" }, { "text": "South Georgia and the South Sandwich Islands", "value": "GS" }, { "text": "Spain", "value": "ES" }, { "text": "Sri Lanka", "value": "LK" }, { "text": "Sudan", "value": "SD" }, { "text": "Suriname", "value": "SR" }, { "text": "Svalbard and Jan Mayen", "value": "SJ" }, { "text": "Swaziland", "value": "SZ" }, { "text": "Sweden", "value": "SE" }, { "text": "Switzerland", "value": "CH" }, { "text": "Syrian Arab Republic", "value": "SY" }, { "text": "Taiwan, Province of China", "value": "TW" }, { "text": "Tajikistan", "value": "TJ" }, { "text": "Tanzania, United Republic of", "value": "TZ" }, { "text": "Thailand", "value": "TH" }, { "text": "Timor-Leste", "value": "TL" }, { "text": "Togo", "value": "TG" }, { "text": "Tokelau", "value": "TK" }, { "text": "Tonga", "value": "TO" }, { "text": "Trinidad and Tobago", "value": "TT" }, { "text": "Tunisia", "value": "TN" }, { "text": "Turkey", "value": "TR" }, { "text": "Turkmenistan", "value": "TM" }, { "text": "Turks and Caicos Islands", "value": "TC" }, { "text": "Tuvalu", "value": "TV" }, { "text": "Uganda", "value": "UG" }, { "text": "Ukraine", "value": "UA" }, { "text": "United Arab Emirates", "value": "AE" }, { "text": "United Kingdom", "value": "GB" }, { "text": "United States", "value": "US" }, { "text": "United States Minor Outlying Islands", "value": "UM" }, { "text": "Uruguay", "value": "UY" }, { "text": "Uzbekistan", "value": "UZ" }, { "text": "Vanuatu", "value": "VU" }, { "text": "Venezuela", "value": "VE" }, { "text": "Viet Nam", "value": "VN" }, { "text": "Virgin Islands, British", "value": "VG" }, { "text": "Virgin Islands, U.S.", "value": "VI" }, { "text": "Wallis and Futuna", "value": "WF" }, { "text": "Western Sahara", "value": "EH" }, { "text": "Yemen", "value": "YE" }, { "text": "Zambia", "value": "ZM" }, { "text": "Zimbabwe", "value": "ZW" } ]; for (var i = 0; i < countries.length; i++) { countries[i].image = 'https://www.countryflags.io/' + countries[i].value.toLowerCase() + '/shiny/24.png'; } jSuites.dropdown(document.getElementById('dropdown'), { data: countries, autocomplete: true, multiple: true, width: '280px', }); </script> </html>