带有 json 数据库源的文本框自动完成答案

【问题标题】：textbox autocomplete with json database source带有 json 数据库源的文本框自动完成
【发布时间】：2012-10-09 22:47:45
【问题描述】：

我有一个 VS.NET 2010 + MVC 3.0 应用程序，我在文本框中遇到了自动完成问题。我正在关注http://jqueryui.com/demos/autocomplete/ 的示例一切都很好。现在我想通过 json 操作填充源数组。对于这个页面加载，我在 IndexKPIOrder.js 中通过 json 调用 GetKPIs 操作。动作 GetKPIs 被很好地触发并且 _list0 被填充，但在 txtKPIs 文本框上没有自动完成。

任何建议将不胜感激。

这就是我正在做的。

Index.cshtml：

@using NegTl.DomainModel.Model.UserCatalogues
@model IEnumerable<KPIOrder>
@{
ViewBag.Title = "KPI Ordering";
}
@section JavaScript
{
    <script type="text/javascript" src="@Url.Content("~/Scripts/helpers.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Views/KPIOrder/IndexKPIOrder.js")" ></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.core.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.widget.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.position.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ui.autocomplete.js")"></script>
}
<p>
    @Html.ActionLink("Create New", "Create")    
</p>
    @Html.TextBox("txtKPIs", "", new { style = "width:300px;" })
<div>
    @{
        var grid = new WebGrid(Model,
            defaultSort: "KPIOrdering",
            rowsPerPage: 20);
    }
    @grid.GetHtml(mode: WebGridPagerModes.All,
            columns: grid.Columns(
                            grid.Column(columnName: "KPIName"),
                            grid.Column(columnName: "KPIHeading"),
                            grid.Column(columnName: "KPIOrdering"),
                            grid.Column(columnName: "IsKPI"),
                            grid.Column(columnName: "IsNumeric"),
                            grid.Column(columnName: "IsNative"),
                            grid.Column(columnName: "Actions", header: "Actions", canSort: false, format: @<text>
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
    @Html.ActionLink("Details", "Details", new { id = item.Id }) |
    @Html.ActionLink("Delete", "Delete", new { id = item.Id })</text>)
        )
    )
</div>
@using (Html.BeginForm("NoAction", "KPIOrder", FormMethod.Post, new { id = "mockFormForAction3" })) { }

控制器：

public class KPIs
{
    public int KPIOrder { get; set; }
    public string KPIName { get; set; }
}
...
public JsonResult GetKPIs()
{
    try
    {
        List<KPIs> _list0 = new List<KPIs>();

        SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NegociationToolEntities"].ConnectionString);
        myConnection.Open();

        SqlCommand cmd = new SqlCommand(ConfigurationManager.AppSettings["KPIListSP"], myConnection);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandTimeout = 0;

        SqlDataReader reader = cmd.ExecuteReader();

        while (reader.Read())
        {
            _list0.Add(new KPIs { KPIOrder = Convert.ToInt32(reader["KPI_Order"]), KPIName = Convert.ToString(reader["KPI_Name"]) });
        }

        return Json(new { status = "OK", data = _list0 }, JsonRequestBehavior.AllowGet);
    }
    catch(Exception ex)
    {
        return Json(new { status = "FAIL", message = ex.Message }, JsonRequestBehavior.AllowGet);
    }
}

IndexKPIOrder.js：

$(document).ready(function () {

    var availableTagsLoad = [""];

    var url = getRootUrlFromFormAction("mockFormForAction3") + "GetKPIs";

    $(function () {
        $("#txtKPIs").autocomplete({
            source: availableTagsLoad
        });
    });

    $.ajax({
        dataType: 'json',
        delay: 400,
        autofill: true,
        selectFirst: false,
        highlight: false,
        url: url,
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            if (response.status == "OK") {
                $.each(response.data, function (index, kpi) {
                    availableTagsLoad.push(kpi.KPIName);
                });
            }
            else {
                $('#errorMessage').html(response.message);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            $('#errorMessage').html(errorThrown);
        }
    });

})

【问题讨论】：

标签： jquery json autocomplete

【解决方案1】：

解决方案是在数组创建后移动自动完成功能，如下所示：

$(document).ready(function () {

    var availableTagsLoad = [];
    var url = getRootUrlFromFormAction("mockFormForAction3") + "GetKPIs";

    $.ajax({
        dataType: 'json',
        delay: 400,
        autofill: true,
        selectFirst: false,
        highlight: false,
        url: url,
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            if (response.status == "OK") {
                $.each(response.data, function (index, kpi) {
                    availableTagsLoad.push(kpi.KPIName);
                });

                $("#txtKPIs").autocomplete({
                    source: availableTagsLoad
                });
            }
        }
    });
})

【讨论】：