I've chosen selectize.js as it fits my needs. One thing I can't force it to do is to move the chosen option to the top of the list.
Here is jsfiddle version
const selectizeInit = (() => {
"use strict";
const s = {
selectBasic: "selectize-basic"
};
// console.log('s', s)
const initialize = () => {
const selectFields = document.querySelectorAll('.selectize-basic');
selectFields && selectFields.forEach( select => {
$(select).selectize({
// hideSelected: true,
create: false,
maxItems: 1,
valueField: 'country',
labelField: 'pref',
searchField: ['country', 'pref', 'code'],
sortField: [{
field: 'priority',
direction: 'asc'
},{
field: 'country',
direction: 'asc'
}],
highlight: true,
placeholder: 'Search',
openOnFocus: true,
options: countryCodes,
items: ['Bhutan'],
render: {
item: function(item, escape) {
return `
<div class="select-item">
<span>${escape(item.pref)}</span>
</div>
`;
},
option: function(item, escape) {
return `
<div class="select-item">
<span class="select-item__country">${escape(item.pref)}</span>
<span class="select-item__prefix">${escape(item.country)}</span>
</div>
`;
}
},
onChange: function(country_name) {
if (this.options) {
for (const [key, value] of Object.entries(this.options)) {
this.options[key].priority = 1;
}
this.options[country_name].priority = 0;
}
},
});
});
};
const countryCodes = [
{
"country": "Afghanistan",
"pref": "+93",
"code": "AF",
"priority": 1
},
{
"country": "Aland Islands",
"pref": "+358",
"code": "AX",
"priority": 1
},
{
"country": "Albania",
"pref": "+355",
"code": "AL",
"priority": 1
},
{
"country": "Algeria",
"pref": "+213",
"code": "DZ",
"priority": 1
},
{
"country": "AmericanSamoa",
"pref": "+1684",
"code": "AS",
"priority": 1
},
{
"country": "Andorra",
"pref": "+376",
"code": "AD",
"priority": 1
},
{
"country": "Angola",
"pref": "+244",
"code": "AO",
"priority": 1
},
{
"country": "Anguilla",
"pref": "+1264",
"code": "AI",
"priority": 1
},
{
"country": "Antarctica",
"pref": "+672",
"code": "AQ",
"priority": 1
},
{
"country": "Antigua and Barbuda",
"pref": "+1268",
"code": "AG",
"priority": 1
},
{
"country": "Argentina",
"pref": "+54",
"code": "AR",
"priority": 1
},
{
"country": "Armenia",
"pref": "+374",
"code": "AM",
"priority": 1
},
{
"country": "Aruba",
"pref": "+297",
"code": "AW",
"priority": 1
},
{
"country": "Australia",
"pref": "+61",
"code": "AU",
"priority": 1
},
{
"country": "Austria",
"pref": "+43",
"code": "AT",
"priority": 1
},
{
"country": "Azerbaijan",
"pref": "+994",
"code": "AZ",
"priority": 1
},
{
"country": "Bahamas",
"pref": "+1242",
"code": "BS",
"priority": 1
},
{
"country": "Bahrain",
"pref": "+973",
"code": "BH",
"priority": 1
},
{
"country": "Bangladesh",
"pref": "+880",
"code": "BD",
"priority": 1
},
{
"country": "Barbados",
"pref": "+1246",
"code": "BB",
"priority": 1
},
{
"country": "Belarus",
"pref": "+375",
"code": "BY",
"priority": 1
},
{
"country": "Belgium",
"pref": "+32",
"code": "BE",
"priority": 1
},
{
"country": "Belize",
"pref": "+501",
"code": "BZ",
"priority": 1
},
{
"country": "Benin",
"pref": "+229",
"code": "BJ",
"priority": 1
},
{
"country": "Bermuda",
"pref": "+1441",
"code": "BM",
"priority": 1
}
];
const init = () => {
initialize();
};
return {
init
};
})();
{
selectizeInit.init();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.min.css" integrity="sha512-zSutnLmqtlWVx0A5NdW8YwshpUETPzJ6YBAvb+bkE0QbVKopS0ACPjE6QY6F9aFPSowfiho+hgeQh095FRPj5A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js"></script>
</head>
<body>
<div>
<label for="phone-prefix" class="form-label">Prefix</label>
<select class="selectize-basic" name="phonePrefix" id="phone-prefix"></select>
</div>
<script>
</script>
</body>
</html>What I've done is - I added priority field to countryCodes and then on change I change priority for the chosen option.
Then filtering is set to display an option with highest priority as first one.
It all works fine the only problem is that the chosen option is displayed as the first one with delay, it doesn't appear at the top when it's chosen but just when other option is selected.
I think I tried all methods available for selectize but to no avail. I already checked with my colleagues but the also couldn't figure it out. So I'm trying here.