Javascript Select Image & text Example

An image & text value picker can be easily implemented by building a custom item template. Pass the items with its base properties, like text and value and all the custom properties needed to the data array.

Download and try example

Preview in full screen

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var instance = mobiscroll.select('#demo-image-text', {
  display: 'anchored',
  itemHeight: 50,
  data: [
    {
      text: 'Barry Lyon',
      value: '42976',
      avatar: 'm1',
    },
    {
      text: 'Hortense Tinker',
      value: '45290',
      avatar: 'f1',
    },
    {
      text: 'Carl Hambledon',
      value: '76208',
      avatar: 'm2',
    },
    {
      text: 'Arlene Sharman',
      value: '47883',
      avatar: 'f2',
    },
    {
      text: 'Keila Delores',
      value: '33379',
      avatar: 'f3',
    },
    {
      text: 'Paula Bush',
      value: '16076',
      avatar: 'f4',
    },
    {
      text: 'Gene Cortez',
      value: '62551',
      avatar: 'm3',
    },
    {
      text: 'Pete Nichols',
      value: '20929',
      avatar: 'm4',
    },
  ],
  selectMultiple: true,
  renderItem: function (item) {
    return (
      '<div class="md-image-text-item">' +
      '<img class="md-image-text-avatar" src="https://img.mobiscroll.com/demos/' +
      item.data.avatar +
      '.png" />' +
      '<div class="md-image-text-name">' +
      item.display +
      '</div>'
    );
  },
});
instance.setVal(['42976', '45290'], true);

<label>
    Users
    <input mbsc-input id="demo-image-text" value="Barry Lyon, Hortense Tinker" data-dropdown="true" data-tags="true" data-input-style="box" data-label-style="stacked" placeholder="Please select..." />
</label>

.md-image-text-item {
    position: relative;
    padding: 15px 0 15px 50px;
    text-align: left;
    line-height: normal;
}

.md-image-text-avatar {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 5px;
}