Select2 With Ajax Asp.net 4.5 webmethod not working

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!

<asp:DropDownList ID="ddlVillage" CssClass="form-control mt-1" runat="server">
            <asp:ListItem Text="Select Village" Value="0"></asp:ListItem>
        </asp:DropDownList>

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
        });