Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>An example with Awesome icons font (can be easily formated to <code>&lt;img&gt;</code> tag instead of <code>&lt;i&gt;</code>)</p> <pre><code> var icons = []; $.each({ "compass" : "icon-compass", "eur" : "icon-eur", "dollar" : "icon-dollar", "yen" : "icon-yen", "won" : "icon-won", "file-text" : "icon-file-text", "sort-by-attributes-alt" : "icon-sort-by-attributes-alt", }, function (k, v) { icons.push({ id: k, style: v }); }); function format(icon) { if (!icon.id) return icon.style; return "&lt;i class='icon-" + icon.id + "'&gt;&lt;/i&gt; " + icon.style; } $('#awsome_icons_select').editable({ inputclass: 'form-control input-medium select2', select2: { allowClear: true, formatResult: format, formatSelection: format, escapeMarkup: function (m) { return m; } }, source: icons, display: function (value) { if (!value) { $(this).empty(); return; } var html = "&lt;i class='icon-" + value + "'&gt;&lt;/i&gt; "; $(this).html(html); } }); </code></pre> <p>This should do the trick for image:</p> <pre><code> var countries= []; $.each({ "US" : "USA", "RU" : "Russia", "DK" : "Denmark", "FR" : "France", "PL" : "Poland", "DE" : "Germany", "GB" : "Great Britain", }, function (k, v) { countries.push({ id: k, state: v }); }); function format(country) { if (!country.id) return country.state; return "&lt;img src='path_to_images/" + country.id + ".png' /&gt; " + country.state; } $('#countries_select').editable({ inputclass: 'form-control input-medium select2', select2: { allowClear: true, formatResult: format, formatSelection: format, escapeMarkup: function (m) { return m; } }, source: countries, display: function (value) { if (!value) { $(this).empty(); return; } var html = "&lt;img src='path_to_images/" + value + ".png' /&gt; "; $(this).html(html); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload