Insert Image in Dropdown lists with jQuery

In HTML it is not possible to add an element in the dropdown list. You need to customize it.

For example –

If you try to add a search box in an <option> or add a country flag image following with country name. When you run it you don’t see any changes in the dropdown.

You can do both operations with select2 jQuery plugin.

Insert image in dropdown lists with jQuery


Contents

  1. Select2
  2. Easyautocomplete
  3. Conclusion

 

1. Select2

This plugin replaces your simple dropdown with the customizable and user-friendly element.

Steps

  • Download select2 jQuery plugin from here and include select2.min.css and select2.min.js in your file.
<link href='select2.min.css' rel='stylesheet' type='text/css'>
<script src='select2.min.js'></script>

Or you can use select2 CDN

<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css'>
<scirpt src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css'></script>
  • Create your Dropdown and add some options.
<select id='social' style='width: 200px;'>
 <option value='facebook'>Facebook</option>
 <option value='twitter'>Twitter</option>
 <option value='linkedin'>Linkedin</option>
 <option value='google_plus'>Google Plus</option>
 <option value='vimeo'>Vimeo</option>
</select>
  • Call select2() method on the dropdown and set Template with templateResult property. Specify function-name in templateResult.

Specified function in templateResult executes for each option, using this to set image.

I have set the images name similar to option value e.g. facebook.png, twitter.png, linkedin.png, etc.

$(document).ready(function(){
 $("#social").select2({
  templateResult: formatOptions
 });
});
 
function formatOptions (state) {
  if (!state.id) { return state.text; }
   var $state = $(
   '<span ><img sytle="display: inline-block;" src="images/' + state.element.value.toLowerCase() + '.png" /> ' + state.text + '</span>'
  );
  return $state;
}

Completed Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- select2 css -->
<link href='select2/dist/css/select2.min.css' rel='stylesheet' type='text/css'>

<!-- select2 script -->
<script src='select2/dist/js/select2.min.js'></script>
 
<script>
 $(document).ready(function(){
  $("#social").select2({
   templateResult: formatState
  });
 });
 
 function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
   '<span ><img sytle="display: inline-block;" src="images/' + state.element.value.toLowerCase() + '.png" /> ' + state.text + '</span>'
  );
  return $state;
 }
</script>

<select id='social' style='width: 200px;'>
 <option value='facebook'>Facebook</option>
 <option value='twitter'>Twitter</option>
 <option value='linkedin'>Linkedin</option>
 <option value='google_plus'>Google Plus</option>
 <option value='vimeo'>Vimeo</option>
</select>

Output

Click on the dropdown list.


 

2. Easyautocomplete

This is an auto-completer jQuery plugin which you can use as a replacement of dropdown.

Steps 

  • Download and include easy-autocomplete.min.css and jquery.easy-autocomplete.min.js in your file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- EasyAutocomplete css -->
<link href='easy-autocomplete.min.css' rel='stylesheet' type='text/css'>

<!-- EasyAutocomplete script -->
<script src='jquery.easy-autocomplete.min.js'></script>
  • Create an input element
<input type='text' id='social'>
  • Initialize easyautocomplete and set JSON object. Specify your data and icon in data property.
<script>
$(document).ready(function(){
 var options = {
  data: [ {name: "Facebook", icon: "images/facebook.png"},
   {name: "Twitter", icon: "images/twitter.png"},
   {name: "Linkedin", icon: "images/linkedin.png"},
   {name: "Google Plus", icon: "images/google_plus.png"},
   {name: "Vimeo", icon: "images/vimeo.png"}],
   getValue: 'name',
   template: {
    type: "iconLeft",
    fields: {
    iconSrc: "icon"
   }
  }
 };

 $("#social").easyAutocomplete(options);
});
 
</script>

Completed Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- select2 css -->
<link href='EasyAutocomplete/easy-autocomplete.min.css' rel='stylesheet' type='text/css'>

<!-- select2 script -->
<script src='EasyAutocomplete/jquery.easy-autocomplete.min.js'></script>

<style>
.eac-icon-right .eac-item img {
 top: auto;
}
</style>
<script>
$(document).ready(function(){
 var options = {
  data: [ {name: "Facebook", icon: "images/facebook.png"},
      {name: "Twitter", icon: "images/twitter.png"},
      {name: "Linkedin", icon: "images/linkedin.png"},
      {name: "Google Plus", icon: "images/google_plus.png"},
      {name: "Vimeo", icon: "images/vimeo.png"}],
  getValue: 'name',
  template: {
   type: "iconLeft",
   fields: {
    iconSrc: "icon"
   }
  }
 };

 $("#social").easyAutocomplete(options);
});

</script>

<input type='text' id='social'>

Output

Enter text in input box.


 

3. Conclusion

These plugins give you more control over the element which you didn’t find in HTML <select>. You can learn more about select2 and Easyautocomplete from their Official website.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *