jqueryjquery-select2jquery-select2-4

Select2 selecting same index with external data source doesn't trigger change event


Using select2 version 4.0.10.
My datasource is returning the data I expect.
The select2 is a single select. Re-selecting the data wouldn't be harmful.

I presume this is a problem with the external data not understanding that my search has completely changed all select2 items. Therefore seeing the item index clicked before searching as the selected item.

Selecting item at index 1 works the first time: enter image description here

After typing in a new search into the select box the item at index 1 seems to be selected eventhough I never actually selected it: enter image description here

This issue does not occur if you were to click on index 0 followed by index 1.
Is there any way I can enable re-selecting the same index?

Note: the select2:select event is never triggered when re-selecting previous index.

Here is a stripped sample of the initialisation of the select2:

$("#SelectBox").select2({
        ajax: {
            url: "/legitimateUrl",
            dataType: "json",
            data: function (params) {
                lastSearchTerm = params.term;

                return {
                    search: params.term
                }
            },
            processResults: function (data) {
                if (!data.results && data.trim()) {
                    //display error to user
                }

                return {
                    results: data.results
                };
            },
            delay: 300
        }
    });

I have tried to find a way to reconfigure this behaviour, but have only found a use for multi-select boxes.

AFTER FINDING SOLUTION

To clarify my solution here is a dumbed down version of the endpoint so you should be able to see what went wrong.

public async Task<JsonResult> Search(string search)
{
    var select2 = new Select2(){ Results = new List<Select2Result>() };
    var searchResult = _service.get(search);//Getting data from service (mockup for reference)
    foreach (var item in searchResult.Items)
    {
        var index = searchResult.Results.IndexOf(item);
        var select2Result = new Select2Result{ Id = index, Text = $"{item.KvkNumber} || {item.Name}", KvkNumber = item.KvkNumber};
        
        select2.Results.Add(select2Result);
    }

    return Json(select2);
}

public class Select2Result //this is a custom made class
{
    public int Id { get; set; }
    public string Text { get; set; }
    public string KvkNumber { get; set; }
}

Solution

  • After a while of just ignoring the issue since fixing it wasn't worth the time. I have had to implement this for other users, leading me to investigate. Since there was no select2:selecting event that fired I started looking inside the endpoint. This endpoint returned an id which i filled with the index of the items. Leading to non unique identifier between selected and new items, which caused the issue of not selecting.

    Simply changed the Id that returned from the endpoint to an actual unique Id.

    Changed the endpoint to (note that the only change is inside the foreach):

    public async Task<JsonResult> Search(string search)
    {
        var select2 = new Select2(){ Results = new List<Select2Result>() };
        var searchResult = _service.get(search); //Getting data from service (mockup for reference)
        foreach (var item in searchResult.Items)
        {
            if (!int.TryParse(item.KvkNumber, out int id)) { continue; }
            var select2Result = new Select2Result{ Id = id, Text = $"{item.KvkNumber} || {item.Name}", KvkNumber = item.KvkNumber};
            
            select2.Results.Add(select2Result);
        }
    
        return Json(select2);
    }