Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to append an icon to selected item in select2?

I'm using fontawesome, and I want to add or remove an icon to the selected item. So I did this: http://jsbin.com/nasixuro/7/edit (Thanks to @Fares M.)

JS

$(document).ready(function () {

    function format_select2_icon(opti) {
        if (!opti.id) return opti.text; // optgroup

        if ($(opti.element).data('icon') == "1") {
            return opti.text + " <i class='fa fa-check'></i>";
        } else {
            return opti.text;
        }
    }

    $("#sel").select2({
        escapeMarkup: function(m) { return m; },
        formatResult: format_select2_icon,
        formatSelection: format_select2_icon
    });

    $("#addok").click(function() {
        actual_value = $("#sel").find(':selected').text();

        if (actual_value.indexOf(" <i class='fa fa-check'></i>") > -1){
            alert("asd");
            return;
        }

        newtext = actual_value + " <i class='fa fa-check'></i>";
        $("#sel").find(':selected').text(newtext).change();
    });

  $("#removeok").click(function() {

        actual_value= $("#sel").find(':selected').text();
        indexOk=actual_value.indexOf(" <i class='fa fa-check'></i>");

        if (indexOk > -1){
            newtext =actual_value.substring(0, indexOk);
            $("#sel").find(':selected').text(newtext).change();
            return;
        }

    });
});

HTML

 <select id="sel" style="width: 100%">
    <option value="1">Hello</option>
    <option value="2" data-icon="1">Friends</option>
    <option value="3">Stackoverflow</option>
</select>
<br><br>
<button id="addok">Add <i class='fa fa-check'></i></button>
<button id="removeok">Remove <i class='fa fa-check'></i></button>

As you see, you can add or remove the icon in Hello and Stackoverflow items, but in Friends (that is the option formated with formatSelection and formatResult), does not remove the icon, and if you try to add the icon, the appends another one to the existing.

Do you have any idea to solve this?

like image 875
mllamazares Avatar asked May 13 '14 20:05

mllamazares


4 Answers

I think there's two ways to achieve that:

  1. The first solution is the better one,

    you can make it work just by defining an escapeMarkup function in select2 options, and this function must return the same data received as input parameter without any changes.

    all what you need is:

    $("#sel").select2({
        escapeMarkup: function(m) { 
           return m; 
        }
    });
    

    here's a working example: http://jsbin.com/nasixuro/3/edit

  2. The second one, make a small changes in select2.js file.

    after inspecting the select2.js, i found the function which updates the text, and there was a little problem, select2.js plugin escapes html to prevent js injection, so to get it work as you expect you have to avoid escaping html and use .html() function from jquery api to insert your html instead of .append() function used in updateSelection function of select2.js.

    here's the function i'm talking about:

    // single
    updateSelection: function (data) {
    
        var container=this.selection.find(".select2-chosen"), formatted, cssClass;
    
        this.selection.data("select2-data", data);
    
        container.empty();
        if (data !== null) {
            formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
        }
        if (formatted !== undefined) {
            container.append(formatted);
        }
        cssClass=this.opts.formatSelectionCssClass(data, container);
        if (cssClass !== undefined) {
            container.addClass(cssClass);
        }
    
        this.selection.removeClass("select2-default");
    
        if (this.opts.allowClear && this.getPlaceholder() !== undefined) {
            this.container.addClass("select2-allowclear");
        }
    },
    

    delete this:

    if (data !== null) {
         formatted=this.opts.formatSelection(data, container, this.opts.escapeMarkup);
    }
    

    and change:

    if (formatted !== undefined) {
         container.append(formatted);
    }
    

    to:

    if (data !== undefined) {
         container.html(data.text);
    }
    

    this is a dirty solution in my opinion.

    For the Remove action use this js code:

    $("#removeok").click(function() {
    
        actual_value= $("#sel").find(':selected').text(), 
        indexOk =actual_value.indexOf(" <i class='fa fa-check'></i>");
        if (indexOk > -1){
            newtext =actual_value.substring(0, indexOk);
            $("#sel").find(':selected').text(newtext).change();
            return;
        }
    
    });
    
like image 95
Fares M. Avatar answered Nov 16 '22 03:11

Fares M.


Simply replacing < by &lt; in the option and removing format functions:

<select id="sel" style="width: 100%">
    <option value="1">Hello</option>
    <option value="2">Friends &lt;i class='fa fa-check'>&lt;/i></option>
    <option value="3">Stackoverflow</option>
</select>

You can test it here: http://jsbin.com/nasixuro/11/edit

like image 29
mllamazares Avatar answered Nov 16 '22 04:11

mllamazares


Manbe you can use the select2 parameter : formatResult or formatSelection like below

$(document).ready(function () {

    $("#sel").select2();

    $("#addok").click(function() {
       $("#sel").select2({
          //formatResult: format
          formatSelection: format
          //escapeMarkup: function(m) { return m; }

       });
    });
});

function format(state) {
   if (!state.id) return state.text; 
   return "<i class='fa fa-check'></i>" + state.text;
}

JSBIN

like image 3
holmes2136 Avatar answered Nov 16 '22 03:11

holmes2136


You need not do the DOM manipulation manually

var icon_checked = "<i class='fa fa-check'></i>";

function format(opt) {
    var selection = this.element.select2("val");

    if (opt.id === selection) {
        return opt.text + icon_checked;
    }
    return opt.text;
}   

$("#sel").select2({
    formatResult: format
});

Basically this.element returns you the select element instance, on which you can run .select2("val") to get the selected value.

Compare that with the id of the object, if it is true then give the HTML with checkbox else return plain text. I think this is what you were trying to achieve.

Here is a Working fiddle, I think this is what you were trying to acheive

like image 3
Mudassir Ali Avatar answered Nov 16 '22 03:11

Mudassir Ali