来自 Json 的 Jquery 自动完成值答案

【问题标题】：Values from Json for Jquery autocomplete来自 Json 的 Jquery 自动完成值
【发布时间】：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
                    });
                });
            });

【问题讨论】：

标签： c# jquery json model-view-controller razor

【解决方案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);
                        }
                    })
                }
            });

【讨论】：