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

Question

我想将值“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": "奥迪", "TYPE_NAME": "A3", "MODEL_NAME": "1.2 TFSI", "MODEL_DESC": "AUDI-A3-1.2 TFSI" }, { "MERK_ID": "1", "MERK_NAME": "奥迪", "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": "奥迪", "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": "巴贾杰", "TYPE_NAME": "复仇者联盟", "MODEL_NAME": "邮轮 220", "MODEL_DESC": "BAJAJ-AVENGER-CRUISE 220" }, { "MERK_ID": "2", "MERK_NAME": "巴贾杰", "TYPE_NAME": "复仇者联盟", "MODEL_NAME": "街道 160", "MODEL_DESC": "BAJAJ-AVENGER-STREET 160" }, { "MERK_ID": "2", "MERK_NAME": "巴贾杰", "TYPE_NAME": "CT", "MODEL_NAME": "100", “MODEL_DESC”：“BAJAJ-CT-100” }, { "MERK_ID": "3", "MERK_NAME": "贝内利", "TYPE_NAME": "502C", "MODEL_NAME": "500 CC", "MODEL_DESC": "BENELLI-502C-500 CC" }, { "MERK_ID": "3", "MERK_NAME": "贝内利", "TYPE_NAME": "CAFERACER", "MODEL_NAME": "1130 CC", "MODEL_DESC": "BENELLI-CAFERACER-1130 CC" }, { "MERK_ID": "3", "MERK_NAME": "贝内利", "TYPE_NAME": "莱昂西诺", "MODEL_NAME": "250", "MODEL_DESC": "BENELLI-LEONCINO-250" },

Answer 1

我已经根据你的 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>

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

Filter data in autocomplete list

c#

jquery

asp.net

autocomplete

filtering