I have made changes in my code accordingly based on the answers given in this.

But somehow it is not working for me, the ajax call is not even reaching to the web-method (instead, it gives page html in response), below is my code snippet. Please help me on this!

Webmethod:

[System.Web.Services.WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string bind_village(string search_key)
{
    return "[{ "id": "1", "text": "test" }]";
}

Javascript ajax call:

$('#<%=ddlVillage.ClientID %>').select2({
            ajax: {
                url: '<%= ResolveUrl("~/booking/create_booking.aspx/bind_village") %>',
                data: function (params) { return JSON.stringify({ search_key: params.term }); },
                dataType: 'json',
                type: "POST",
                params: {
                    contentType: 'application/json; charset=utf-8'
                },
                results: function (data) {
                    return {
                        results: JSON.parse(data.d)
                    };
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error('AJAX Error:', errorThrown);
                }
            },
            minimumInputLength: 3
        });