HTML tag inside jQuery

Question

Every time I loop through this foreach, a dropdown gets set with database values. When a table has a value for name it keeps it's value when it is empty; it doesn't show anything. That's good. But every time a name is displayed, I want a FontAwesome icon in front of this.name. Example <i class="fas fa-car">. How do I get this HTML tag in-between text: and (this.name ? ?

processResults: function (data, params) {
    var results = [];
    jQuery.each(data, function () {
        results.push({
            id: this.id,
            text: (this.name ? this.name + ' ' : '')
                + (this.firstname ? this.firstname + ' ' : '')
                + (this.middlename ? this.middlename + ' ' : '')
                + (this.lastname ? this.lastname + ' ' : '')
                + ' (' + this.email + ')',
        });
    });
    return {
        results: results,
        pagination: {
            more: false
        }
    };
}

I got the question to put a bit of HTML in my question so here you go :)

<div class="form-group row">
    <label class="col-md-2 col-form-label" for="users">{{ trans('messages.receiver') }}</label>
    <div class="col-md-10">
        <select id="users" title="Search users" multiple class="form-control" name="user_ids[]"></select>
    </div>
</div>

Have you tried just putting it there, in single quotes, with a plus sign, after `text:`? — Heretic Monkey, Nov 04 '19 at 16:13
What's `processResults`? Are you using [tag:datatables]? What sort of "drop down" is it? A simple ` — freedomn-m, Nov 04 '19 at 16:13
+ (this.firstname ? this.firstname + ' ' : '') should be + (' '+ this.firstname ? this.firstname + ' ' : '') your essentially concatenating the string together like you would normally.. — Marty, Nov 04 '19 at 16:57
@hereticmonkey I have indeed tried that, without succes. When I do that it just shows it as a string and it is added with all the other options like firstname middle name etc. — T B Duzijn, Nov 05 '19 at 08:40
@freedomn-m don't worry about `processResults` it is part of a bigger function, this just a small pievce from the function. And yeah I use ` — T B Duzijn, Nov 05 '19 at 08:43
That is good information to have *in the question*, as it would have prevented a good deal of wasted time. As would letting people know of any frameworks, libraries, etc. that you are using, up front (see [ask]). Stack Overflow gets thousands of questions a day, and you have a limited window in which your question will be seen by people. Waiting 15 hours to respond to comments is unlikely to help that. Just a tip from someone who's been around for a while :). — Heretic Monkey, Nov 05 '19 at 13:47
@hereticMonkey Sorry, I was busy sleeping. Like many people do. Asked the question right before i got off of work. — T B Duzijn, Nov 06 '19 at 08:41

T B Duzijn · Accepted Answer · 2019-11-06T15:40:57.050

1

The standard value of .select2 is that it can't display HTML tags.

You can overwrite this by adding:

escapeMarkup: function(markup) { return markup; },

at the top. This will overwrite it's value of not recognizing HTML tags.

Now you can add the wanted HTML code.

edited Nov 06 '19 at 15:40

answered Nov 05 '19 at 09:42

T B Duzijn

21
10

score 0 · Answer 2 · answered Nov 04 '19 at 17:13

You could also fix this problem with css You can add a fontawesome icon in front of the name with some css styling by using a before.

The link here is an old bookmark of mine, where you can find an example in the approved answer.

Use font awesome icon as CSS content

HTML tag inside jQuery

2 Answers2