时间戳

首页 > 解决方案 > 过滤自动完成列表中的数据

c# - 过滤自动完成列表中的数据

问题描述

我想将值“merk”发送到“modelName”，例如，如果我选择“ÄUDI”，在我的自动完成下拉列表中将只显示奥迪的模型车。

这是我的 aspx.cs

private void Get_data (string merkName)
{
    List<string> modelNames = new List<string>();

    string cs = ConfigurationManager.AppSettings["ConnectionString"];
    OracleConnection conn = new OracleConnection(cs);
    {
        OracleCommand comm = new OracleCommand("Package_AUTOCOMPLETE.get_data", conn);
        comm.CommandType = CommandType.StoredProcedure;

        comm.Parameters.Add(new OracleParameter("P_STRING", OracleDbType.Varchar2, 80)).Value = searchTxt;
        comm.Parameters.Add(new OracleParameter("P_MERK", OracleDbType.Varchar2, 80)).Value = merkName;
        comm.Parameters.Add(new OracleParameter("P_CURSOR", OracleDbType.RefCursor)).Direction = ParameterDirection.Output;
        comm.Parameters.Add(new OracleParameter("P_STATUS", OracleDbType.Varchar2, 1)).Direction = ParameterDirection.Output;
        comm.Parameters.Add(new OracleParameter("P_ERROR_MESSAGE", OracleDbType.Varchar2, 100)).Direction = ParameterDirection.Output;

        conn.Open();
        OracleDataReader rdr = comm.ExecuteReader();
        while (rdr.Read())
        {
            modelNames.Add(rdr["MODEL_DESC"].ToString());
        }
    }
}

protected void ddlMerk_SelectedIndexChanged(object sender, EventArgs e)
{
    //
    //string model = "";
    string merk = "";
    merk = ddlMerk.SelectedItem.ToString();        

    Get_data(merk);
}

这是我的jQuery

$(function () {
    $('#<%=searchTxt.ClientID%>').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "default2.asmx/getModelName",
                data: "{ 'modelName': '" + request.term + "' }",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    response(data.d.slice(0, 10));
                    response(data.d);
                },
                //error: function (result) {
                //    alert('There is a problem processing your request');
                //    console.log("err res->>",result);
                //}
            });
        },
    minLength: 3
    });
});

请帮忙给出一个解决方案，谢谢:)

这是我的 Json 视图

[ {“MERK_ID”：“1”，“MERK_NAME”：“AUDI”，“TYPE_NAME”：“A3”，“MODEL_NAME”：“1.2 TFSI”，“MODEL_DESC”：“AUDI-A3-1.2 TFSI”}，{ “MERK_ID”：“1”，“MERK_NAME”：“AUDI”，“TYPE_NAME”：“A3”，“MODEL_NAME”：“NEW 2.0 FSI SPORTBACK TRIPTRONIC”，“MODEL_DESC”：“AUDI-A3-NEW 2.0 FSI SPORTBACK TRIPTRONIC” " }, { "MERK_ID": "1", "MERK_NAME": "AUDI", "TYPE_NAME": "A3", "MODEL_NAME": "S3 LIMOUSINE 2.0 TFSI QUATTRO", "MODEL_DESC": "AUDI-A3-S3豪华轿车 2.0 TFSI QUATTRO" }, { "MERK_ID": "2", "MERK_NAME": "BAJAJ", "TYPE_NAME":“AVENGER”、“MODEL_NAME”：“CRUISE 220”、“MODEL_DESC”：“BAJAJ-AVENGER-CRUISE 220”}、{“MERK_ID”：“2”、“MERK_NAME”：“BAJAJ”、“TYPE_NAME”：“AVENGER” ", "MODEL_NAME": "STREET 160", "MODEL_DESC": "BAJAJ-AVENGER-STREET 160" }, { "MERK_ID": "2", "MERK_NAME": "BAJAJ", "TYPE_NAME": "CT", “MODEL_NAME”：“100”，“MODEL_DESC”：“BAJAJ-CT-100”}，{“MERK_ID”：“3”，“MERK_NAME”：“BENELLI”，“TYPE_NAME”：“502C”，“MODEL_NAME”： “500 CC”，“MODEL_DESC”：“BENELLI-502C-500 CC”}，{“MERK_ID”：“3”，“MERK_NAME”：“BENELLI”，“TYPE_NAME”：“CAFERACER”，“MODEL_NAME”：“1130 CC”，“MODEL_DESC”：“BENELLI-CAFERACER-1130 CC”}，{“MERK_ID”：“3”，“MERK_NAME” ：“BENELLI”，“TYPE_NAME”：“LEONCINO”，“MODEL_NAME”：“250”，“MODEL_DESC”：“BENELLI-LEONCINO-250”}，

标签： c#jqueryasp.netautocompletefiltering

解决方案

我根据您的 json 改编了一个没有 ajax 的示例：

$(function() {

  $("#autocomplete").autocomplete({
    source: function(request, response) {
    
    //to put in section success of your ajax ------------------
    //regex to select data which starts with the input (nocase)
    var regex = new RegExp("^" + request.term,"i");
    //filter data following the input
    var ndata = data.filter((d) => regex.test(d.MERK_NAME));
     response($.map(ndata, function(item) {
     return {
     label: item.MODEL_DESC,
        }

   }));
      
    },
    minLength: 3,
  });



});

var data = [{
    "MERK_ID": "1",
    "MERK_NAME": "AUDI",
    "TYPE_NAME": "A3",
    "MODEL_NAME": "1.2 TFSI",
    "MODEL_DESC": "AUDI-A3-1.2 TFSI"
  },
  {
    "MERK_ID": "1",
    "MERK_NAME": "AUDI",
    "TYPE_NAME": "A3",
    "MODEL_NAME": "NEW 2.0 FSI SPORTBACK TRIPTRONIC",
    "MODEL_DESC": "AUDI-A3-NEW 2.0 FSI SPORTBACK TRIPTRONIC"
  },
  {
    "MERK_ID": "1",
    "MERK_NAME": "AUDI",
    "TYPE_NAME": "A3",
    "MODEL_NAME": "S3 LIMOUSINE 2.0 TFSI QUATTRO",
    "MODEL_DESC": "AUDI-A3-S3 LIMOUSINE 2.0 TFSI QUATTRO"
  },
  {
    "MERK_ID": "2",
    "MERK_NAME": "BAJAJ",
    "TYPE_NAME": "AVENGER",
    "MODEL_NAME": "CRUISE 220",
    "MODEL_DESC": "BAJAJ-AVENGER-CRUISE 220"
  },
  {
    "MERK_ID": "2",
    "MERK_NAME": "BAJAJ",
    "TYPE_NAME": "AVENGER",
    "MODEL_NAME": "STREET 160",
    "MODEL_DESC": "BAJAJ-AVENGER-STREET 160"
  },
  {
    "MERK_ID": "2",
    "MERK_NAME": "BAJAJ",
    "TYPE_NAME": "CT",
    "MODEL_NAME": "100",
    "MODEL_DESC": "BAJAJ-CT-100"
  },
  {
    "MERK_ID": "3",
    "MERK_NAME": "BENELLI",
    "TYPE_NAME": "502C",
    "MODEL_NAME": "500 CC",
    "MODEL_DESC": "BENELLI-502C-500 CC"
  },
  {
    "MERK_ID": "3",
    "MERK_NAME": "BENELLI",
    "TYPE_NAME": "CAFERACER",
    "MODEL_NAME": "1130 CC",
    "MODEL_DESC": "BENELLI-CAFERACER-1130 CC"
  },
  {
    "MERK_ID": "3",
    "MERK_NAME": "BENELLI",
    "TYPE_NAME": "LEONCINO",
    "MODEL_NAME": "250",
    "MODEL_DESC": "BENELLI-LEONCINO-250"
  }
];
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>autocomplete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <label for="autocomplete">Select Something </label>
  <input id="autocomplete">


</body>

</html>

推荐阅读