当用户开始输入时，数据库中的 jQuery 自动完成

Question

我正在尝试使用自动完成功能。 当我在 Page_Load 事件中获取我的数据库值时它可以工作，但它需要永远加载页面，因为它是我的自动完成文本字段需要可用的大量数据。 最好在用户开始输入时进行 db 查询。 我尝试了不同的方法，但都没有奏效。

这是我目前的代码；

        <script type="text/javascript">
        $(document).ready(function () {

            SearchText();

            function SearchText() {
                $("#<%= artnr1.ClientID %>").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "GetArticles.asmx/searcharticles",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: "{ 'term' : '" + $("#<%= artnr1.ClientID %>").val() + "'}",
                            dataFilter: function (data) { return data; },
                            success: function (data) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.label,
                                        value: item.value,
                                        desc: item.desc
                                    }
                                }))
                                //debugger;
                            },
                            error: function (result) {
                                alert("Error");
                            }
                        });
                    },
                    minLength: 1,
                    delay: 1000,
                    autoFocus: true,
                    change: function (event, ui) {
                        $("#<%= artben1.ClientID %>").val(ui.item.desc);//or ui.item.desc perhaps
                    }
                }).focus(function () {
                    $(this).data("uiAutocomplete").search($(this).val());
                });
            }
        });
    </script>


<asp:TextBox runat="server" id="artnr1" placeholder="Artnr" value=""/>

这是我的 asmx 文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.Odbc;
using System.Web.Configuration;
using System.Data;
using Pervasive.Data.SqlClient;
using Pervasive.Data.Common;
using Newtonsoft.Json;

namespace cDealer
{
    /// <summary>
    /// Summary description for GetPyART
    /// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class GetPyART : System.Web.Services.WebService
{

    [WebMethod]
    public List<string> searcharticles(string term)
    {
        string strLagerSaldo = string.Empty;
        string strLagerReserv = string.Empty;
        string strLagerBest = string.Empty;
        string strLagerPris = string.Empty;
        string strArtKod = string.Empty;
        string strEANKod = string.Empty;
        string strBen = string.Empty;
        string strartnrvalue = string.Empty;
        string pyarticles = string.Empty;


        OdbcConnection dbPyConn = new OdbcConnection(WebConfigurationManager.ConnectionStrings["ConnPyString"].ConnectionString);

        string pysql = @"select D1001_Artikelkod, D1021_Benämning, D1132_Saldo, D1134_Reserverat, D1136_Beställt, D1154_Grundpris, " + (char)34 + "D1109_EAN-kod" + (char)34 + " from PULAGER WHERE D1055_Kalkyltyp <> '60' AND (D1001_Artikelkod Like '%" + term + "%' OR D1021_Benämning Like '%" + term + "%') ORDER By D1001_Artikelkod DESC";
        using (OdbcConnection connection = new OdbcConnection(WebConfigurationManager.ConnectionStrings["ConnPyString"].ConnectionString))
        {
            OdbcCommand command = new OdbcCommand(pysql, connection);

            List<string> articles = new List<string>();

            connection.Open();

            OdbcDataReader reader = command.ExecuteReader();

            // Call Read before accessing data.
            while (reader.Read())
            {
                if (reader.HasRows)
                {

                    if (reader["D1132_Saldo"] != DBNull.Value)
                    {
                        strLagerSaldo = reader.GetDecimal(reader.GetOrdinal("D1132_Saldo")).ToString("G29").TrimEnd();
                    }
                    else
                    {
                        strLagerSaldo = "0";
                    }

                    if (reader["D1134_Reserverat"] != DBNull.Value)
                    {
                        strLagerReserv = reader.GetDecimal(reader.GetOrdinal("D1134_Reserverat")).ToString("G29").TrimEnd();
                    }
                    else
                    {
                        strLagerReserv = "0";
                    }

                    if (reader["D1136_Beställt"] != DBNull.Value)
                    {
                        strLagerBest = reader.GetDecimal(reader.GetOrdinal("D1136_Beställt")).ToString("G29").TrimEnd();
                    }
                    else
                    {
                        strLagerBest = "0";
                    }


                    if (reader["D1154_Grundpris"] != DBNull.Value)
                    {
                        strLagerPris = reader.GetDecimal(reader.GetOrdinal("D1154_Grundpris")).ToString("G29").TrimEnd();
                        strLagerPris = String.Format("{0:C}", Convert.ToDouble(strLagerPris));
                    }
                    else
                    {
                        strLagerPris = "0";
                    }


                    if (reader["D1001_Artikelkod"] != DBNull.Value)
                    {
                        strArtKod = reader.GetString(reader.GetOrdinal("D1001_Artikelkod")).TrimEnd();
                    }
                    else
                    {
                        strArtKod = "";
                    }


                    if (reader["D1021_Benämning"] != DBNull.Value)
                    {
                        strBen = reader.GetString(reader.GetOrdinal("D1021_Benämning")).TrimEnd().Replace("" + (char)34 + "", "´´");
                    }
                    else
                    {
                        strBen = "";
                    }

                    if (reader["D1109_EAN-kod"] != DBNull.Value)
                    {
                        strEANKod = reader.GetString(reader.GetOrdinal("D1109_EAN-kod")).TrimEnd();
                    }
                    else
                    {
                        strEANKod = "";
                    }

                    articles.Add("{label:" + strArtKod + " - " + strEANKod + " - " + strBen + " - L.Saldo: " + strLagerSaldo + " - Reserv.: " + strLagerReserv + " - Beställt: " + strLagerBest + " - KPris: " + strLagerPris + ", value: " + strArtKod + ", desc:" + strBen + "}");

                    //Response.Write(strartsearch);
                }
                else
                {
                    //Response.Redirect("https://www.google.se");

                }
            }

            // Call Close when done reading.
            reader.Close();
            return articles;

        }
    }
}

}

当我开始输入然后暂停时，事件被触发。我可以在 firebug 中看到我得到这样的 json 响应；

"[{"label":"771678 - Fuel injector/10/kw","value":"771678","desc":"Fuel injector for Ford"}]"

但没有显示自动完成功能。 我可以在调试器中看到这个错误 TypeError：无效的“in”操作数 TypeError: ui.item 为空

我不知道那在哪里，出了什么问题。任何人都可以帮助或指出一个非常简单的指南，其中包含针对 C# webforms 解释的所有位。 谢谢。

Answer 1

问题可能是 JSON 不正确。在您在 cmets 中发布的内容之后，我想说的是 Array 之前的引用是问题所在。

我的回复如下所示：{"d":"[{\"label\"

您可以在此处找到 JSON https://en.wikipedia.org/wiki/JSON 的一些示例和更多信息

总结一下： 如果发送纯 json，则不需要转义，在字符串中您必须转义 （或与单引号结合）

{
  "name": "test",
  "array": [ 1, 2, 3, 4], /* here are no quotes around the square brakets */
  "object":  {"prop1":1, "prop2":2} 
}

一个好的测试方法是创建一个文本文件，将文件扩展名更改为“.json”，然后添加 JSON。像这样，您可以尝试使用引号等。为确保从服务器返回的所有内容均正确无误，您还可以将返回类型更改为文本并将消息打印到控制台。

如果问题仍然存在，请发布从服务器发送的原始 json。

更新： 这里https://embed.plnkr.co/OSYJQZ/ 是 Firefox 45+ 上的一个工作示例，带有您更正的 json。
您可以看到 json 的外观（并在需要时复制出来）。

更新2

问题可能是因为 Json 中的嵌套对象是作为字符串创建的 (List<string>)。我建议写这样的东西（或使用ResponseFormat 属性，依赖用例）

//helper Object for the data Structure
class Helper{
    public string label;
    public string value;
    public string desc;
}

然后在代码中

    //create the list of Objects
    List<Helper> list = new List<Helper>();

    list.Add (new Helper(){
    label="771678 - - Fuel injector for Ford - L.Saldo: 0 - Reserv.: 0 - Order: 0 - KPris : 0,00 kr",
    value="771678",
    desc="Fuel injector for Ford" }       
    );

   //serialize the Object into Vaild JSON
   var jsonString = (new System.Web.Script.Serialization.JavaScriptSerializer()).Serialize(list);

这里有一些关于 SO 处理类似问题的其他问题 https://stackoverflow.com/a/3196640/1679286
https://stackoverflow.com/a/19564022/1679286

更新 3： 这是我整理的一个解决方案，它只是一个 ashx 处理程序，但它是我可以在不打开 VS 的情况下做的禁食。我希望这会有所帮助

<%@ WebHandler Language="C#" Class="JsonHandler" %>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


public class JsonHandler : IHttpHandler
{

   class Helper{
        public string label;
        public string value;
        public string desc;
   }

    public void ProcessRequest(HttpContext context)
    {
        List<Helper> list = new List<Helper>();

        list.Add (new Helper(){
        label="771678 - - Fuel injector for Ford - L.Saldo: 0 - Reserv.: 0 - Order: 0 - KPris : 0,00 kr",
        value="771678",
desc="Fuel injector for Ford" }       
        );
        context.Response.ContentType = "application/json";

        var jsonString = (new System.Web.Script.Serialization.JavaScriptSerializer()).Serialize(list);

        context.Response.Write(jsonString);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}