JQuery 自动完成源代码问题 C#

发布于 2024-12-02 11:49:24 字数 5419 浏览 0 评论 0原文

我试图获取一个简单的示例来说明如何使用 AutoComplete JQuery 插件工作，但遇到了一些问题。该代码是用 C# (2008) 编写的，没有使用 MVC。

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">    
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>  
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>   
        <script type="text/javascript">

            $(document).ready(function() {
                //GetFormulary();
                LoadAutoComplete();
            });

            function LoadAutoComplete() {
                $("#quickSearchTextBox").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "/WebSite1/Default.aspx/GetTest2",
                            data: "{}",
                            dataType: "json",
                            success: function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        label: item.TestName,
                                        value: item.TestName
                                    }
                                }));
                            }
                        });
                    },
                    minLength: 2
                });
            }                     
        </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table id="quickSearchTable" border="0">
        <tbody>
            <tr>
                <td>
                    <input style="width: 100%" id="quickSearchTextBox" title="Enter search words" maxlength="200" value="" />
                </td>            
            </tr>
        </tbody>
    </table>
    <div id="searchResults" style="display: none;">
    </div>
        </div>
        </form>
    </body>
    </html>

隐藏代码：

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Web.Script.Serialization;
    using System.Web.Services;
    using System.Web.UI;

    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }


        [WebMethod]
        public static string GetTest1()
        {
            return GetFTest2("art");
        }

        private static string GetFTest2(string searchPhrase)
        {
            var formularyTests = new List<FormularyTest>();

            const string connectionString = "";

            using (var sqlConnection = new SqlConnection(connectionString))
            {
                sqlConnection.Open();
                var sqlCommand = new SqlCommand("Search", sqlConnection) { CommandType = CommandType.StoredProcedure };
                sqlCommand.Parameters.Add(new SqlParameter("@Phrase", searchPhrase));
                SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();
                while (sqlDataReader.Read())
                {
                    formularyTests.Add(new FormularyTest { Name = sqlDataReader["LongName"].ToString() });
                }
            }
            var jSearializer = new JavaScriptSerializer();
            return jSearializer.Serialize(formularyTests);        
        }

        [WebMethod]
        public static List<FormularyTest> GetTest2()
        {
            return GetFTest1("arterial");
        }

        private static List<FormularyTest> GetFTest1(string searchPhrase)
        {
            var formularyTests = new List<FormularyTest>();

            const string connectionString = "";

            using (var sqlConnection = new SqlConnection(connectionString))
            {
                sqlConnection.Open();
                var sqlCommand = new SqlCommand("Search", sqlConnection) { CommandType = CommandType.StoredProcedure };
                sqlCommand.Parameters.Add(new SqlParameter("@Phrase", searchPhrase));
                SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();
                while (sqlDataReader.Read())
                {
                    formularyTests.Add(new FormularyTest { Name = sqlDataReader["LongName"].ToString() });
                }
            }

            return formularyTests;
        }
    }

    public class FormularyTest
    {
        public string Name { get; set; }
        public string Url { get; set; }
    }

Screen Shot

由于某种原因，我无法在文本框中显示任何内容。如果有一点帮助，我们将不胜感激。

原文

I am trying to get a simple example of how to us the AutoComplete JQuery plug-in work but running into some issue. The code is written in C# (2008) without using MVC.

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">    
        <title></title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>  
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>   
        <script type="text/javascript">

            $(document).ready(function() {
                //GetFormulary();
                LoadAutoComplete();
            });

            function LoadAutoComplete() {
                $("#quickSearchTextBox").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "/WebSite1/Default.aspx/GetTest2",
                            data: "{}",
                            dataType: "json",
                            success: function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        label: item.TestName,
                                        value: item.TestName
                                    }
                                }));
                            }
                        });
                    },
                    minLength: 2
                });
            }                     
        </script>

    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <table id="quickSearchTable" border="0">
        <tbody>
            <tr>
                <td>
                    <input style="width: 100%" id="quickSearchTextBox" title="Enter search words" maxlength="200" value="" />
                </td>            
            </tr>
        </tbody>
    </table>
    <div id="searchResults" style="display: none;">
    </div>
        </div>
        </form>
    </body>
    </html>

Code Behind:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Web.Script.Serialization;
    using System.Web.Services;
    using System.Web.UI;

    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }


        [WebMethod]
        public static string GetTest1()
        {
            return GetFTest2("art");
        }

        private static string GetFTest2(string searchPhrase)
        {
            var formularyTests = new List<FormularyTest>();

            const string connectionString = "";

            using (var sqlConnection = new SqlConnection(connectionString))
            {
                sqlConnection.Open();
                var sqlCommand = new SqlCommand("Search", sqlConnection) { CommandType = CommandType.StoredProcedure };
                sqlCommand.Parameters.Add(new SqlParameter("@Phrase", searchPhrase));
                SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();
                while (sqlDataReader.Read())
                {
                    formularyTests.Add(new FormularyTest { Name = sqlDataReader["LongName"].ToString() });
                }
            }
            var jSearializer = new JavaScriptSerializer();
            return jSearializer.Serialize(formularyTests);        
        }

        [WebMethod]
        public static List<FormularyTest> GetTest2()
        {
            return GetFTest1("arterial");
        }

        private static List<FormularyTest> GetFTest1(string searchPhrase)
        {
            var formularyTests = new List<FormularyTest>();

            const string connectionString = "";

            using (var sqlConnection = new SqlConnection(connectionString))
            {
                sqlConnection.Open();
                var sqlCommand = new SqlCommand("Search", sqlConnection) { CommandType = CommandType.StoredProcedure };
                sqlCommand.Parameters.Add(new SqlParameter("@Phrase", searchPhrase));
                SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();
                while (sqlDataReader.Read())
                {
                    formularyTests.Add(new FormularyTest { Name = sqlDataReader["LongName"].ToString() });
                }
            }

            return formularyTests;
        }
    }

    public class FormularyTest
    {
        public string Name { get; set; }
        public string Url { get; set; }
    }

Screen Shot

For some reason I cannot get anything to show up in the textbox. A little help would be much appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谈下烟灰 2024-12-09 11:49:24

JavaScriptSerializer 返回格式为：

{d:"[{\"Name\":\"Test 1\",\"Url\":\"url1\"},{\"Name\":\"Test 2\",\"Url\":\"url2\"}]"}

因此，data.d 将为您提供序列化字符串 [{"Name":"Test 1","Url":"url1" },{"名称":"测试 2","网址":"url2"}]。这会更接近您想要的，但您实际上需要的是该字符串的 JSON 数组版本。如果您在 success 函数中使用 eval(data.d) 而不是 data，它将起作用。诚然，使用 eval 是一个不完美的解决方案，但它确实允许您的代码“工作”。

以下 JavaScript 发生了变化：

        function LoadAutoComplete() {
            $("#quickSearchTextBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "/Service.asmx/Test",
                        data: "{'searchTerm':'" + request.term + "'}",
                        dataType: "json",
                        async: true,
                        success: function (data) {
                            response($.map(eval(data.d), function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Url
                                }
                            }));
                        },
                        error: function (result) {
                            alert("Error loading the data");
                        }
                    });
                },
                minLength: 2
            });

The JavaScriptSerializer is returning a result in the format of:

{d:"[{\"Name\":\"Test 1\",\"Url\":\"url1\"},{\"Name\":\"Test 2\",\"Url\":\"url2\"}]"}

So, data.d would give you your serialized string [{"Name":"Test 1","Url":"url1"},{"Name":"Test 2","Url":"url2"}]. That woudl be closer to what you want, but you're really after a JSON array version of that string. If you use eval(data.d) instead of data in your success function, it will work. Admittedly, using eval is an imperfect solution, but it does allow your code to "work".

The following JavaScript has the change:

        function LoadAutoComplete() {
            $("#quickSearchTextBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "/Service.asmx/Test",
                        data: "{'searchTerm':'" + request.term + "'}",
                        dataType: "json",
                        async: true,
                        success: function (data) {
                            response($.map(eval(data.d), function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Url
                                }
                            }));
                        },
                        error: function (result) {
                            alert("Error loading the data");
                        }
                    });
                },
                minLength: 2
            });

回复收藏 0 原文

~没有更多了~