Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking

mtvbrianking/countries.php

Last active October 29, 2019 16:03
Show Gist options
  • Save mtvbrianking/d573b87f55512ab09b862f8d8b2d7ff7 to your computer and use it in GitHub Desktop.
Save mtvbrianking/d573b87f55512ab09b862f8d8b2d7ff7 to your computer and use it in GitHub Desktop.
Download ZIP
select2 multi select auto suggestion
Raw
countries.php
<?php
header('Content-Type: application/json');
$countries = array(
[
'name' => 'Afghanistan',
'code' => 'AF'
],
[
'name' => 'Åland Islands',
'code' => 'AX'
],
[
'name' => 'Albania',
'code' => 'AL'
],
[
'name' => 'Algeria',
'code' => 'DZ'
],
[
'name' => 'American Samoa',
'code' => 'AS'
],
[
'name' => 'AndorrA',
'code' => 'AD'
],
[
'name' => 'Angola',
'code' => 'AO'
],
[
'name' => 'Anguilla',
'code' => 'AI'
],
[
'name' => 'Antarctica',
'code' => 'AQ'
],
[
'name' => 'Antigua and Barbuda',
'code' => 'AG'
],
[
'name' => 'Argentina',
'code' => 'AR'
],
[
'name' => 'Armenia',
'code' => 'AM'
],
[
'name' => 'Aruba',
'code' => 'AW'
],
[
'name' => 'Australia',
'code' => 'AU'
],
[
'name' => 'Austria',
'code' => 'AT'
],
[
'name' => 'Azerbaijan',
'code' => 'AZ'
],
[
'name' => 'Bahamas',
'code' => 'BS'
],
[
'name' => 'Bahrain',
'code' => 'BH'
],
[
'name' => 'Bangladesh',
'code' => 'BD'
],
[
'name' => 'Barbados',
'code' => 'BB'
],
[
'name' => 'Belarus',
'code' => 'BY'
],
[
'name' => 'Belgium',
'code' => 'BE'
],
[
'name' => 'Belize',
'code' => 'BZ'
],
[
'name' => 'Benin',
'code' => 'BJ'
],
[
'name' => 'Bermuda',
'code' => 'BM'
],
[
'name' => 'Bhutan',
'code' => 'BT'
],
[
'name' => 'Bolivia',
'code' => 'BO'
],
[
'name' => 'Bosnia and Herzegovina',
'code' => 'BA'
],
[
'name' => 'Botswana',
'code' => 'BW'
],
[
'name' => 'Bouvet Island',
'code' => 'BV'
],
[
'name' => 'Brazil',
'code' => 'BR'
],
[
'name' => 'British Indian Ocean Territory',
'code' => 'IO'
],
[
'name' => 'Brunei Darussalam',
'code' => 'BN'
],
[
'name' => 'Bulgaria',
'code' => 'BG'
],
[
'name' => 'Burkina Faso',
'code' => 'BF'
],
[
'name' => 'Burundi',
'code' => 'BI'
],
[
'name' => 'Cambodia',
'code' => 'KH'
],
[
'name' => 'Cameroon',
'code' => 'CM'
],
[
'name' => 'Canada',
'code' => 'CA'
],
[
'name' => 'Cape Verde',
'code' => 'CV'
],
[
'name' => 'Cayman Islands',
'code' => 'KY'
],
[
'name' => 'Central African Republic',
'code' => 'CF'
],
[
'name' => 'Chad',
'code' => 'TD'
],
[
'name' => 'Chile',
'code' => 'CL'
],
[
'name' => 'China',
'code' => 'CN'
],
[
'name' => 'Christmas Island',
'code' => 'CX'
],
[
'name' => 'Cocos (Keeling) Islands',
'code' => 'CC'
],
[
'name' => 'Colombia',
'code' => 'CO'
],
[
'name' => 'Comoros',
'code' => 'KM'
],
[
'name' => 'Congo',
'code' => 'CG'
],
[
'name' => 'Congo, The Democratic Republic of the',
'code' => 'CD'
],
[
'name' => 'Cook Islands',
'code' => 'CK'
],
[
'name' => 'Costa Rica',
'code' => 'CR'
],
[
'name' => 'Cote D\'Ivoire',
'code' => 'CI'
],
[
'name' => 'Croatia',
'code' => 'HR'
],
[
'name' => 'Cuba',
'code' => 'CU'
],
[
'name' => 'Cyprus',
'code' => 'CY'
],
[
'name' => 'Czech Republic',
'code' => 'CZ'
],
[
'name' => 'Denmark',
'code' => 'DK'
],
[
'name' => 'Djibouti',
'code' => 'DJ'
],
[
'name' => 'Dominica',
'code' => 'DM'
],
[
'name' => 'Dominican Republic',
'code' => 'DO'
],
[
'name' => 'Ecuador',
'code' => 'EC'
],
[
'name' => 'Egypt',
'code' => 'EG'
],
[
'name' => 'El Salvador',
'code' => 'SV'
],
[
'name' => 'Equatorial Guinea',
'code' => 'GQ'
],
[
'name' => 'Eritrea',
'code' => 'ER'
],
[
'name' => 'Estonia',
'code' => 'EE'
],
[
'name' => 'Ethiopia',
'code' => 'ET'
],
[
'name' => 'Falkland Islands (Malvinas)',
'code' => 'FK'
],
[
'name' => 'Faroe Islands',
'code' => 'FO'
],
[
'name' => 'Fiji',
'code' => 'FJ'
],
[
'name' => 'Finland',
'code' => 'FI'
],
[
'name' => 'France',
'code' => 'FR'
],
[
'name' => 'French Guiana',
'code' => 'GF'
],
[
'name' => 'French Polynesia',
'code' => 'PF'
],
[
'name' => 'French Southern Territories',
'code' => 'TF'
],
[
'name' => 'Gabon',
'code' => 'GA'
],
[
'name' => 'Gambia',
'code' => 'GM'
],
[
'name' => 'Georgia',
'code' => 'GE'
],
[
'name' => 'Germany',
'code' => 'DE'
],
[
'name' => 'Ghana',
'code' => 'GH'
],
[
'name' => 'Gibraltar',
'code' => 'GI'
],
[
'name' => 'Greece',
'code' => 'GR'
],
[
'name' => 'Greenland',
'code' => 'GL'
],
[
'name' => 'Grenada',
'code' => 'GD'
],
[
'name' => 'Guadeloupe',
'code' => 'GP'
],
[
'name' => 'Guam',
'code' => 'GU'
],
[
'name' => 'Guatemala',
'code' => 'GT'
],
[
'name' => 'Guernsey',
'code' => 'GG'
],
[
'name' => 'Guinea',
'code' => 'GN'
],
[
'name' => 'Guinea-Bissau',
'code' => 'GW'
],
[
'name' => 'Guyana',
'code' => 'GY'
],
[
'name' => 'Haiti',
'code' => 'HT'
],
[
'name' => 'Heard Island and Mcdonald Islands',
'code' => 'HM'
],
[
'name' => 'Holy See (Vatican City State)',
'code' => 'VA'
],
[
'name' => 'Honduras',
'code' => 'HN'
],
[
'name' => 'Hong Kong',
'code' => 'HK'
],
[
'name' => 'Hungary',
'code' => 'HU'
],
[
'name' => 'Iceland',
'code' => 'IS'
],
[
'name' => 'India',
'code' => 'IN'
],
[
'name' => 'Indonesia',
'code' => 'ID'
],
[
'name' => 'Iran, Islamic Republic Of',
'code' => 'IR'
],
[
'name' => 'Iraq',
'code' => 'IQ'
],
[
'name' => 'Ireland',
'code' => 'IE'
],
[
'name' => 'Isle of Man',
'code' => 'IM'
],
[
'name' => 'Israel',
'code' => 'IL'
],
[
'name' => 'Italy',
'code' => 'IT'
],
[
'name' => 'Jamaica',
'code' => 'JM'
],
[
'name' => 'Japan',
'code' => 'JP'
],
[
'name' => 'Jersey',
'code' => 'JE'
],
[
'name' => 'Jordan',
'code' => 'JO'
],
[
'name' => 'Kazakhstan',
'code' => 'KZ'
],
[
'name' => 'Kenya',
'code' => 'KE'
],
[
'name' => 'Kiribati',
'code' => 'KI'
],
[
'name' => 'Korea, Democratic People\'S Republic of ',
'code' => 'KP '
], [
'name' => 'Korea, Republic of',
'code' => 'KR'
],
[
'name' => 'Kuwait',
'code' => 'KW'
],
[
'name' => 'Kyrgyzstan',
'code' => 'KG'
],
[
'name' => 'Lao People\'S Democratic Republic ',
'code' => 'LA '
], [
'name' => 'Latvia',
'code' => 'LV'
],
[
'name' => 'Lebanon',
'code' => 'LB'
],
[
'name' => 'Lesotho',
'code' => 'LS'
],
[
'name' => 'Liberia',
'code' => 'LR'
],
[
'name' => 'Libyan Arab Jamahiriya',
'code' => 'LY'
],
[
'name' => 'Liechtenstein',
'code' => 'LI'
],
[
'name' => 'Lithuania',
'code' => 'LT'
],
[
'name' => 'Luxembourg',
'code' => 'LU'
],
[
'name' => 'Macao',
'code' => 'MO'
],
[
'name' => 'Macedonia, The Former Yugoslav Republic',
'code' => 'MK'
],
[
'name' => 'Madagascar',
'code' => 'MG'
],
[
'name' => 'Malawi',
'code' => 'MW'
],
[
'name' => 'Malaysia',
'code' => 'MY'
],
[
'name' => 'Maldives',
'code' => 'MV'
],
[
'name' => 'Mali',
'code' => 'ML'
],
[
'name' => 'Malta',
'code' => 'MT'
],
[
'name' => 'Marshall Islands',
'code' => 'MH'
],
[
'name' => 'Martinique',
'code' => 'MQ'
],
[
'name' => 'Mauritania',
'code' => 'MR'
],
[
'name' => 'Mauritius',
'code' => 'MU'
],
[
'name' => 'Mayotte',
'code' => 'YT'
],
[
'name' => 'Mexico',
'code' => 'MX'
],
[
'name' => 'Micronesia, Federated States of',
'code' => 'FM'
],
[
'name' => 'Moldova, Republic of',
'code' => 'MD'
],
[
'name' => 'Monaco',
'code' => 'MC'
],
[
'name' => 'Mongolia',
'code' => 'MN'
],
[
'name' => 'Montserrat',
'code' => 'MS'
],
[
'name' => 'Morocco',
'code' => 'MA'
],
[
'name' => 'Mozambique',
'code' => 'MZ'
],
[
'name' => 'Myanmar',
'code' => 'MM'
],
[
'name' => 'Namibia',
'code' => 'NA'
],
[
'name' => 'Nauru',
'code' => 'NR'
],
[
'name' => 'Nepal',
'code' => 'NP'
],
[
'name' => 'Netherlands',
'code' => 'NL'
],
[
'name' => 'Netherlands Antilles',
'code' => 'AN'
],
[
'name' => 'New Caledonia',
'code' => 'NC'
],
[
'name' => 'New Zealand',
'code' => 'NZ'
],
[
'name' => 'Nicaragua',
'code' => 'NI'
],
[
'name' => 'Niger',
'code' => 'NE'
],
[
'name' => 'Nigeria',
'code' => 'NG'
],
[
'name' => 'Niue',
'code' => 'NU'
],
[
'name' => 'Norfolk Island',
'code' => 'NF'
],
[
'name' => 'Northern Mariana Islands',
'code' => 'MP'
],
[
'name' => 'Norway',
'code' => 'NO'
],
[
'name' => 'Oman',
'code' => 'OM'
],
[
'name' => 'Pakistan',
'code' => 'PK'
],
[
'name' => 'Palau',
'code' => 'PW'
],
[
'name' => 'Palestinian Territory, Occupied',
'code' => 'PS'
],
[
'name' => 'Panama',
'code' => 'PA'
],
[
'name' => 'Papua New Guinea',
'code' => 'PG'
],
[
'name' => 'Paraguay',
'code' => 'PY'
],
[
'name' => 'Peru',
'code' => 'PE'
],
[
'name' => 'Philippines',
'code' => 'PH'
],
[
'name' => 'Pitcairn',
'code' => 'PN'
],
[
'name' => 'Poland',
'code' => 'PL'
],
[
'name' => 'Portugal',
'code' => 'PT'
],
[
'name' => 'Puerto Rico',
'code' => 'PR'
],
[
'name' => 'Qatar',
'code' => 'QA'
],
[
'name' => 'Reunion',
'code' => 'RE'
],
[
'name' => 'Romania',
'code' => 'RO'
],
[
'name' => 'Russian Federation',
'code' => 'RU'
],
[
'name' => 'RWANDA',
'code' => 'RW'
],
[
'name' => 'Saint Helena',
'code' => 'SH'
],
[
'name' => 'Saint Kitts and Nevis',
'code' => 'KN'
],
[
'name' => 'Saint Lucia',
'code' => 'LC'
],
[
'name' => 'Saint Pierre and Miquelon',
'code' => 'PM'
],
[
'name' => 'Saint Vincent and the Grenadines',
'code' => 'VC'
],
[
'name' => 'Samoa',
'code' => 'WS'
],
[
'name' => 'San Marino',
'code' => 'SM'
],
[
'name' => 'Sao Tome and Principe',
'code' => 'ST'
],
[
'name' => 'Saudi Arabia',
'code' => 'SA'
],
[
'name' => 'Senegal',
'code' => 'SN'
],
[
'name' => 'Serbia and Montenegro',
'code' => 'CS'
],
[
'name' => 'Seychelles',
'code' => 'SC'
],
[
'name' => 'Sierra Leone',
'code' => 'SL'
],
[
'name' => 'Singapore',
'code' => 'SG'
],
[
'name' => 'Slovakia',
'code' => 'SK'
],
[
'name' => 'Slovenia',
'code' => 'SI'
],
[
'name' => 'Solomon Islands',
'code' => 'SB'
],
[
'name' => 'Somalia',
'code' => 'SO'
],
[
'name' => 'South Africa',
'code' => 'ZA'
],
[
'name' => 'South Georgia and the South Sandwich Islands',
'code' => 'GS'
],
[
'name' => 'Spain',
'code' => 'ES'
],
[
'name' => 'Sri Lanka',
'code' => 'LK'
],
[
'name' => 'Sudan',
'code' => 'SD'
],
[
'name' => 'Suriname',
'code' => 'SR'
],
[
'name' => 'Svalbard and Jan Mayen',
'code' => 'SJ'
],
[
'name' => 'Swaziland',
'code' => 'SZ'
],
[
'name' => 'Sweden',
'code' => 'SE'
],
[
'name' => 'Switzerland',
'code' => 'CH'
],
[
'name' => 'Syrian Arab Republic',
'code' => 'SY'
],
[
'name' => 'Taiwan, Province of China',
'code' => 'TW'
],
[
'name' => 'Tajikistan',
'code' => 'TJ'
],
[
'name' => 'Tanzania, United Republic of',
'code' => 'TZ'
],
[
'name' => 'Thailand',
'code' => 'TH'
],
[
'name' => 'Timor-Leste',
'code' => 'TL'
],
[
'name' => 'Togo',
'code' => 'TG'
],
[
'name' => 'Tokelau',
'code' => 'TK'
],
[
'name' => 'Tonga',
'code' => 'TO'
],
[
'name' => 'Trinidad and Tobago',
'code' => 'TT'
],
[
'name' => 'Tunisia',
'code' => 'TN'
],
[
'name' => 'Turkey',
'code' => 'TR'
],
[
'name' => 'Turkmenistan',
'code' => 'TM'
],
[
'name' => 'Turks and Caicos Islands',
'code' => 'TC'
],
[
'name' => 'Tuvalu',
'code' => 'TV'
],
[
'name' => 'Uganda',
'code' => 'UG'
],
[
'name' => 'Ukraine',
'code' => 'UA'
],
[
'name' => 'United Arab Emirates',
'code' => 'AE'
],
[
'name' => 'United Kingdom',
'code' => 'GB'
],
[
'name' => 'United States',
'code' => 'US'
],
[
'name' => 'United States Minor Outlying Islands',
'code' => 'UM'
],
[
'name' => 'Uruguay',
'code' => 'UY'
],
[
'name' => 'Uzbekistan',
'code' => 'UZ'
],
[
'name' => 'Vanuatu',
'code' => 'VU'
],
[
'name' => 'Venezuela',
'code' => 'VE'
],
[
'name' => 'Viet Nam',
'code' => 'VN'
],
[
'name' => 'Virgin Islands, British',
'code' => 'VG'
],
[
'name' => 'Virgin Islands, U.S.',
'code' => 'VI'
],
[
'name' => 'Wallis and Futuna',
'code' => 'WF'
],
[
'name' => 'Western Sahara',
'code' => 'EH'
],
[
'name' => 'Yemen',
'code' => 'YE'
],
[
'name' => 'Zambia',
'code' => 'ZM'
],
[
'name' => 'Zimbabwe',
'code' => 'ZW'
]
);
if(empty($_GET['term'])) {
// die(json_encode(['error' => 'Search term not specified']));
echo json_encode(['countries' => $countries]);
return;
}
function search($hay, $key, $needle){
if(!strlen($needle))
return array();
$found = array();
$bait = strtolower($needle);
foreach($hay as $item) {
$catch = strtolower($item[$key]);
if(strpos($catch, $bait) !== false)
array_push($found, $item);
}
return $found;
}
$term = $_GET['term'];
$found = search($countries, 'name', $term);
echo json_encode(['countries' => $found]);
Raw
index.html
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<h1>&nbsp;</h1>
</div>
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-12" style="border: 1px dashed gray;">
<form id="countries" method="POST" action="">
<div class="form-group">
<label>Available...</label>
<select id="country" class="form-control"></select>
</div>
<hr>
<div class="form-group">
<label>Selected...</label>
<select id="countries" name="countries[]" class="form-control" multiple>
<!-- <option value='elem_1'>elem 1</option> -->
</select>
</div>
<hr>
<button type="submit" class="btn btn-default btn-block">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script>
$('select[id=country]').select2({
width: '100%',
allowClear: true,
minimumInputLength: 3,
placeholder: "Choose country...",
ajax: {
type: 'GET',
url: 'countries.php',
dataType: 'json',
delay: 250,
cache: true,
data: function (params) {
return {
term: params.term
};
},
processResults: function (data) {
return {
results: data.countries.map(function (country) {
return {
id: country.code,
text: country.name
};
})
};
},
error: function (xhr) {
console.error(xhr);
}
}
});
var selected = [];
$('select[id=country]').on('select2:select', function (e) {
var data = e.params.data;
// https://stackoverflow.com/a/7364307/2732184
var country = $.grep(selected, function(obj) {
return obj.code == data.id;
});
if(country.length === 0) {
$('select[id=countries]').append($('<option>', {
value: data.id,
text: data.text,
selected: true
}));
selected.push({
code: data.id,
name: data.text
});
}
// https://select2.org/programmatic-control/add-select-clear-items#clearing-selections
$('select[id=country]').val(null).trigger('change');
});
// ...
$('select[id=countries]').select2();
$('select[id=countries]').on('select2:select', function (e) {
var data = e.params.data;
selected.push({
code: data.id,
name: data.text
});
});
$('select[id=countries]').on('select2:unselect', function (e) {
var data = e.params.data;
// https://stackoverflow.com/q/21659888/2732184
selected = selected.filter(function(country) {
return country.code !== data.id;
});
// console.log(e.params.data.element);
});
$('form#countries').on('submit', function(event) {
event.preventDefault();
console.log($(this).serializeArray());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment