Is it possible to generate all the emojis and append to the select dropdown?

Question

Is there any possible ways to generate all the emojis and append them in to a single select dropdown by using JavaScript? Or I have to type each of them manually?

<select>
    <option>🍰</option>
    <option>🐲</option>
<select>

<script>
function()
{
    // How do I put all the emojis into the select dropdown..?
}
</script>

Answer 1

You can define start and end values of different emoji ranges. Then, you can loop through each range and append emoji to option tag.

var mySelect = document.getElementById('mySelect')
var newOption;
var emojRange = [
  [128513, 128591], [9986, 10160], [128640, 128704]
];
//inside emojRange 2d array , define range arrays (start number,end number).
//1st array : Emoticons icons
//2nd range : Dingbats.
//3rd range : Transport and map symbols
for (var i = 0; i < emojRange.length; i++) {
  var range = emojRange[i];
  for (var x = range[0]; x < range[1]; x++) {

    newOption = document.createElement('option');
    newOption.value = x;
    newOption.innerHTML = "&#" + x + ";";
    mySelect.appendChild(newOption);
  }

}

I took hexadecimal ranges from this site: http://apps.timwhitlock.info/emoji/tables/unicode.

var mySelect = document.getElementById('mySelect')
var newOption;
var emojRange = [
  [128513, 128591] ,[9986,10160],[128640,128704]
];
//inside array define range arrays.
//1st array : Emoticons icons
//2nd range : Dingbats.
//3rd range : Transport and map symbols
for (var i = 0; i < emojRange.length; i++) {
  var range = emojRange[i];
  for (var x = range[0]; x < range[1]; x++) {

    newOption = document.createElement('option');
    newOption.value = x;
    newOption.innerHTML = "&#" + x + ";";
    mySelect.appendChild(newOption);
  }

}

option {
  font-size:50px;
}

<select id="mySelect">
</select>

Answer 2

I downloaded the characters from Full Emoji Data, v3.0 and put them in a JavaScript library hosted in Github, released under the unlicense.

Using that you can write code as follows:

var target = document.getElementById("target");
var emojiCount = emoji.length;

for(var index = 0; index < emojiCount; index++)
{
  addEmoji(emoji[index]);
}

function addEmoji(code)
{
  var option = document.createElement('option');
  option.innerHTML =  code;
  target.appendChild(option);
}

<script src="https://rawgit.com/theraot/emoji/master/emoji.js" charset="utf-8"></script>
<select id ="target">
<select>

You could use JavaScript to filter the list to only those emoji that don't have a modifier.

I'll copy the README I wrote for the project in Github below:

---

Emoji

List of all emoji for JavaScript

Use as follows:

<script src="https://rawgit.com/theraot/emoji/master/emoji.js" charset="utf-8"></script>

The list of emoji was retrieved from Full Emoji Data, v3.0

Note 1: Some emoji are composed of two Unicode characters. These are using emoji modifiers and may not render correctly.

Note 2: Support may vary from browser to browser and platform to platform, the use of a emoji font is advised.

Answer 3

If your emojis are unicode characters, put all of them in an array and loop through to construct your select dropdown as shown below :

var myEmojis = ['&#9786', '&#9785']; //put all your emojis in this array
var selectOptions = "<option>select</option>";
for(var i = 0; i < myEmojis.length; i++){
  selectOptions += "<option>" + myEmojis[i] + "</option>"
}
$('select').html(selectOptions);