jQuery自动完成功能不会在ASP.NET中调用文本框

最后发布: 2014-06-05 12:58:44


问题

我试图在别人写的一个asp.net项目中使用一个jQuery自动完成脚本。 尽管我可以在单独的项目中运行它,但是在我提到的项目中实施时,它什么也没做。 它们都在.net 4.0框架上。 页面的html代码是这样的:

<%@ 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>

我认为问题在于下面的这一行应该调用该函数以从后面的代码中检索自动填充单词,但是无论我输入到文本框中什么都没有发生。

$( “#ContentPlaceHolder1_txtCountry”)。自动完成({

我知道代码有效,因为我在不同的项目中使用了它,但是当我在这个项目中实现它时,我什么也没得到。 我知道从工作背后的代码返回的列表,如果我可以在那里调用该函数,我相信我会检索结果。

所以问题是,这可能是什么原因? 这是由某些项目属性引起的,还是由母版页引起的,我调用该函数的代码是错误的还是其他原因?


下面是Meslek.aspx中的整个代码

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();
        }
    }
}
javascript jquery asp.net autocomplete textbox
回答

我建议使用此:

使用功能:

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

在文本框中:

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