当用户开始输入时,jQuery从数据库自动完成

时间:2016-09-09 15:13:54

标签: c# json jquery-ui autocomplete

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

到目前为止,这是我的代码;

        <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:操作数a中的'in'无效 TypeError:ui.item为null

我没有idéa,那是什么,有什么不对。任何人都可以请帮助或指向一个非常简单的指南与C#webforms解释的所有位。 感谢。

1 个答案:

答案 0 :(得分:1)

问题很可能是JSON不正确。在我发表的评论中,我会说,数组之前的引用是问题。

  

我的回答如下:{“d”: [{\”标签\“

在这里,您可以找到一些示例和一些更多信息给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应该是什么样的(并在需要时复制出来)。 Screenshot from Plunker

<强> UPDATE2

问题可能是因为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);

以下是关于处理类似问题的其他一些问题 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;
        }
    }
}