来自 Json 的 Jquery 自动完成值

Posted 2023-04-13

【中文标题】来自 Json 的 Jquery 自动完成值

【英文标题】：Values from Json for Jquery autocomplete

【发布时间】：2020-09-27 17:55:21

【问题描述】：

我对 JQuery、Json 和 MVC 还很陌生。我正在尝试让自动完成功能在文本框（带有下拉菜单）中工作。这适用于 Web 报告中使用的参数值选择。数据表值位于名为“BSNList”的模型中。然后在 .cshtml 视图中，必须将 BSN 文本值放入 var 中，以便 jquery 函数运行自动完成 - 我让它与内联列表一起测试自动完成。但是，我无法让 BSNList 值在 jquery 脚本中工作-即使尝试使用 JsonConvert.SerializeObject 这是我的代码

birthCertificateModel.BSNList = new SelectList(_jobsParamData.AsDataView(), "JobId", "BSN"); birthCertificateModel.JSONresult = JsonConvert.SerializeObject(_jobsParamData); 返回视图（birthCertificateModel）；

 <div class="col-md-2">
            @*<div class="ui-widget">*@
            <label for="tags">BSNs: </label>
            <input id="tags" class="ui-autocomplete-input" name="tags">
            @*</div>*@
            @Html.LabelFor(m => m.BSNName, ReportCaptions.BSN) <br />
            @Html.ListBoxFor(m => m.BSNName,
                         Model.BSNList,
                         new  @class = "ListBox", size = 8 )
        </div>



<script type="text/javascript">
            var jsonBSNList;
            jsonBSNList = @Model.BSNList.DataTextField;

$(document).ready(function () 
                $(function () 

                    $("#tags").autocomplete(
                        source: jsonBSNList
                    );
                );
            );

`

【参考方案1】：

想通了 - 这是我的控制器、html 和脚本 - 我认为 ajax 是我第一次绊倒的地方。

   [HttpPost]
    public JsonResult SerialNumberLookup(string serialNumberString)
    
        using (SqlConnection conn = new SqlConnection(this.connstr))
        
            List<string> serialNumberList = new List<string>();
            using (SqlCommand cmd =
                 new SqlCommand(BuildJobStatusModel.LookupSQLSelect, conn))
            
                conn.Open();
                cmd.Parameters.AddWithValue("@SearchText", serialNumberString);
                SqlDataReader sqlDataReader = cmd.ExecuteReader();
                while (sqlDataReader.Read())
                
                    serialNumberList.Add(sqlDataReader["SerialNumber"].ToString());
                
                return this.Json(serialNumberList, JsonRequestBehavior.AllowGet);
            
        
   <br />
                @Html.LabelFor(model => model.SelectedSerialNumber, ReportCaptions.SerialNumber + " Look-up:")
                @Html.TextBoxFor(model => model.SelectedSerialNumber, htmlAttributes: new  @id = "autocompleteSerialNumber" )
                <br />

 $("#autocompleteSerialNumber").autocomplete(
            
                minLength: minSearchLen,
                source: function (request, response) 
                    $.ajax(
                        url: "/Reports/SerialNumberLookup",
                        type: "POST",
                        // contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data:  SerialNumberString: request.term ,
                        dataFilter: function (data)  return data; ,
                        success: function (data) 

                            response($.map(data, function (item) 
                                return 
                                    value: item
                                ;
                            ))
                        ,
                        error: function (XMLHttpRequest, textStatus, errorThrown) 
                            alert(textStatus);
                        
                    )
                
            );