SUMO SELECT REFRESH ISSUE

Question

Sumo select is not refreshing the data in it. Action Method is return the correct List. Just like J QUERY multi select rebuild() function is available is there anything I am missing?

$("#ddlCountry").change(function () { BindDDlLocation(CountryId); });

function BindDDlLocation(CountryId) {
var ddlLocation = $("#ddlLocation");
$.ajax({
    url: RootUrl + '/Home/BindMasterDropDown',
    type: "GET",
    data: { TableType: 'tbllocation', RegionId: '0', Country_id: CountryId, Categ_Id: '0', SubCateg_Id: '0', EntityID: '0', DepartmentID: '0' },
    datatype: 'json',
    async: false,
    success: function (result) {
        $("#ddlLocation").html('');
        ddlLocation.append($("<option></option>").val('').html('--select--'));
        $.each(result, function (key, value) {
            ddlLocation.append($("<option></option>").val(value.ID).html(value.vDescription));
        });
        //alert("location binded");
        $("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.' });
        $(".SumoSelect").css('margin-top', '15px');
    },
    error: function (err) {
        alert(err.statusText);
    }
});

}

Answer 1

This is the ANSWER: It works fine now.
REFERENCE : https://github.com/HemantNegi/jquery.sumoselect/issues/286

 //bimmy
        $("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.', triggerChangeCombined: false });
        $("#ddlLocation").SumoSelect().sumo.reload();
        $(".SumoSelect").css('margin-top', '15px');
       //bimmy

Full CODE:

function BindDDlLocation(CountryId) {
var ddlLocation = $("#ddlLocation");
$.ajax({
    url: RootUrl + '/Home/BindMasterDropDown',
    type: "GET",
    data: { TableType: 'tbllocation', RegionId: '0', Country_id: CountryId, Categ_Id: '0', SubCateg_Id: '0', EntityID: '0', DepartmentID: '0' },
    datatype: 'json',
    async: false,   
    success: function (result) {
        $("#ddlLocation").html('');

        ddlLocation.append($("<option></option>").val('').html('--select--'));
        $.each(result, function (key, value) {
            ddlLocation.append($("<option></option>").val(value.ID).html(value.vDescription));
        });
       //bimmy
        $("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.', triggerChangeCombined: false });
        $("#ddlLocation").SumoSelect().sumo.reload();
        $(".SumoSelect").css('margin-top', '15px');
       //bimmy
    },
    error: function (err) {
        alert(err.statusText);
    }
});

}

Answer 2

$('.the_name_of_select_class').SumoSelect().reload();

Answer 3

You can use the following code after appending data to your dropdown list, it will surely work. Don't need to re-initialize your sumo plugin again, if its already initialized.

$('#ddlLocation')[0].sumo.reload();

use the above code, in success of the ajax call after appending data to your dropdown list.

Reference: https://hemantnegi.github.io/jquery.sumoselect/