jQuery Autocomplete Doesn't Invoke For Textbox in ASP.NET

Question

I'm trying to use a jquery autocomplete script within an asp.net project somebody else wrote. Although i can run it in a seperated project, it doesn't do anything when implemented inside the project i mentioned. They both are on .net 4.0 framework. html code of the page is like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="Meslek.aspx.cs" Inherits="AutoComplete.Scripts_Meslek" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript"  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
<script language="javascript"  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script language="javascript"  type="text/javascript">
    $(document).ready(function () {
        $("#ContentPlaceHolder1_txtCountry").autocomplete({
            source: function (request, response) {
                var param = { keyword: $('#ContentPlaceHolder1_txtCountry').val() };
                $.ajax({
                    url: "Meslek.aspx/GetCountryNames",
                    data: JSON.stringify(param),
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                value: item
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1
        });
    });


</script>  
<div>
   <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 </div>
 <br />
</asp:Content>

I think the problem is this row below should invoke the function to retrieve the autocomplete words from code behind, but whatever i enter into the textbox, nothing happens.

$("#ContentPlaceHolder1_txtCountry").autocomplete({

I know the code works becuase i use it in different projects, but when i implemented it on this project, i got nothing. I know the List that is returned form the code behind works and if i could call the function there, i am sure that i will retrieve the results.

So the question is, what might be the cause of this? Is this caused by some project properties, is it caused by the master page, is my code to invoke the function is wrong or is it something else?

---

The entire code in Meslek.aspx is below

using System;
using System.Collections.Generic;
//using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data.SqlClient;
using System.Web.Configuration;

namespace AutoComplete
{
    public partial class Scripts_Meslek : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string[] GetCountryNames(string keyword)
        {
            List<string> country = new List<string>();
            //string query = string.Format("SELECT DISTINCT Country FROM Customers WHERE Country LIKE '%{0}%'", keyword);
            string query = string.Format("SELECT mslk FROM meslek WHERE mslk LIKE '%{0}%'", keyword);

            using (SqlConnection con =
                //new SqlConnection("Data Source=KMISBPRDSQL001; Database=SIRIUS; Initial Catalog=SIRIUS; Trusted_Connection=True; "))
                    new SqlConnection(WebConfigurationManager.ConnectionStrings["SIRIUS"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand(query, con))
                {
                    con.Open();
                    SqlDataReader reader = cmd.ExecuteReader();

                    while (reader.Read())
                    {
                        country.Add(reader.GetString(0));
                    }
                }
            }

            return country.ToArray();
        }
    }
}

Answer 1

I suggest using this:

use function :

function CompleteText() {
      $(document).ready(function () {
    $(".Country").autocomplete({
        source: function (request, response) {
            var param = { keyword: $('.Country').val() };
            $.ajax({
                url: "Meslek.aspx/GetCountryNames",
                data: JSON.stringify(param),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 1
    });
   });
}

In TextBox:

 <asp:TextBox ID="txtCountry" onfocus="CompleteText()" runat="server"   class="Country" Width="298px"></asp:TextBox>