Question

我试图得到一个简单的例子，说明如何使用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

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

Answer 1

JavaScriptSerializer以格式：

返回结果

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

因此，data.d会为您提供序列化字符串[{"Name":"Test 1","Url":"url1"},{"Name":"Test 2","Url":"url2"}]。那个woudl更接近你想要的东西，但你真的在追求那个字符串的JSON数组版本。如果您在成功函数中使用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
            });

JQuery自动完成源问题C＃

1 个答案: