JQuery AutoComplete源问题C＃

我想了解如何使用AutoComplete JQuery插件工作但遇到一些问题。该代码是用C＃（2008）编写的，不使用MVC。JQuery AutoComplete源问题C＃

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

出于某种原因，我不能得到任何东西在文本框中显示出来。一点帮助将不胜感激。

来源

2011-08-31 Toad

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

来源

2011-08-31 20:57:58 ajalexander

感谢您的帮助。它确实像你说的那样工作。 – Toad

JQuery AutoComplete源问题C＃

回答

相关问题