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

Posted 2023-05-08

【中文标题】过滤自动完成列表中的数据

【英文标题】：Filter data in autocomplete list

【发布时间】：2021-06-01 20:19:53

【问题描述】：

我想将值“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": "新 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 豪华轿车 2.0 TFSI QUATTRO", "MODEL_DESC": "AUDI-A3-S3 豪华轿车 2.0 TFSI QUATTRO" , “MERK_ID”：“2”， "MERK_NAME": "BAJAJ", "TYPE_NAME": "复仇者", "MODEL_NAME": "CRUISE 220", "MODEL_DESC": "BAJAJ-AVENGER-CRUISE 220" , “MERK_ID”：“2”， "MERK_NAME": "BAJAJ", "TYPE_NAME": "复仇者", "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": "咖啡厅", "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" ,

【问题讨论】：

没有你的 json 输出很难帮助你，因为我想你想过滤输出

我已经用字符串列表编辑了问题

这不是我想要的，你在输出中有数据，格式为 json，具有属性 merk 等等

对不起，我只是知道如何将表格转换为 Json，我已经用 json 视图编辑了问题。请你的帮助。如果您需要其他任何东西来清除解决方案，请问我。

响应码是什么，你的json是data还是data.d？

【参考方案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>