JQuery Автозаполнение Источник Проблема C # - PullRequest
Новая
       8

JQuery Автозаполнение Источник Проблема C #

0 голосов
/ 31 августа 2011

Я пытаюсь получить простой пример того, как нам работает плагин 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

Почему-то я не могу ничего получитьчтобы показать в текстовом поле.Небольшая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 01 сентября 2011

JavaScriptSerializer возвращает результат в формате: 

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

Итак, data.d даст вам вашу сериализованную строку [{"Name":"Test 1","Url":"url1"},{"Name":"Test 2","Url":"url2"}]. Это будет ближе к тому, что вы хотите, но вам действительно нужна версия этой строки в массиве 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
            });
...