CODEWITHSUNDEEP
jsonjqueryjquery-select2
sksallaj
sksallaj

Reputation: 4010

Select2 toUpperCase error on markMatch

So I've been using select2 for non-ajax queries, and it's been pretty helpful so far. However, I wanted to use one of the dropdown for an ajax json response. Throughout the monolithic document there have been little tid bits sprouted around showing how to use it.

monolithic document: http://ivaynberg.github.io/select2/

Aside from the code examples being scrunched up, hardly any html code, or json examples, I'm coming to a loss right now.

So here's a json I'm getting:

[{"ST_CD":"NY","ST_SHRT_NM":"New York"},{"ST_CD":"NY","ST_SHRT_NM":"New York1"}]

It's pretty standard. I've noticed in the document that you need to map up an "id" and a "text" for this to work. Not sure why I can't just take this as it is, but there's hardly any documentation on that too.

https://groups.google.com/forum/#!topic/select2/rDPFU0IWpE0

The author of select2 mentions these key facts:

you need to provide an id function in the options because your id key is "Id" instead of "id".

you also need to provide formatResult and formatSelection options because you dont have a "text" key.

the user who had the same problem here: https://github.com/ivaynberg/select2/issues/693 also showed this to be accurate.

However, this is not working on my end.

$(document).ready(function () {
    $("#e6").select2({
        id: function(e) { return e.ST_CD },
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        ajax: {
            url: "api/VendorLocation",
            dataType: 'json',
            data: function (term, page) {
                return {};
            },
            results: function (data, page) {
                return { results: data };
            },
            formatResult: function (item) { return item.ST_SHRT_NM; },
            formatSelection: function (item) { return item.ST_SHRT_NM; }
        }
    });
});

in the return of the results portion of the ajax function, the data object is filled up correctly. It has the data that I needed (ST_CD and ST_SHRT_NM has the proper values), when I continue on, that's when I get the error. Same error shows up regardless of formatResult and formatSelection being there.

So I debug into Select2, and this is where the error shows up:

$.fn.select2.defaults = {
    (...)
    formatResult: function (result, container, query, escapeMarkup) {
        var markup = [];
        markMatch(result.text, query.term, markup, escapeMarkup);
        return markup.join("");
    },
    (...)
}

In this code, the result object is filled, but the text property is undefined.

I think it's really unreasonable to format my json data to adhere to the standards of a front end html control, or do any kind of json parsing. If there is a way that select2 can allow me to specify the text and id portion explicitly, then I'd like to see it or know what I'm doing wrong.

Upvotes: 2

Views: 6855

Answers (1)

sksallaj
sksallaj

Reputation: 4010

It's been a while since I asked this but I came up with a solution a week after I asked this. So I decided to answer it now.. just created a DTO that maps to the actual entity created by EF using linq:

So on the server side:

public class StateDTO
{
    public string id { get; set; }
    public string text { get; set; }
}

then the query that gets hit before sending it back

//the context is generated from EF
public IQueryable<StateDTO> Get(string st_name)
{
    return (
        from state in this.context.States
        where state.ST_SHRT_NM.Contains(st_name)
        select new StateDTO() { id = state.ST_CD,
                               text = state.ST_SHRT_NM,
                             });
}

I get the following results: [{"id":"NY","text":"New York"},{"id":"NY","text":"New York1"}]

since I had my select2 configuration set up, it worked after that:

$(document).ready(function () {
    $("#e6").select2({
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        ajax: {
            url: "api/States",
            dataType: 'json',
            data: function (term, page) {
                return {};
            },
            results: function (data, page) {
                return { results: data };
            }
        }
    });
});

Upvotes: 5

Related Questions