【问题标题】:implementing autocomplete textbox in MVC4 through Json通过 Json 在 MVC4 中实现自动完成文本框
【发布时间】:2015-06-19 20:03:05
【问题描述】:

我想在文本框中实现自动完成功能。下面是一个获取用户输入的字符串的方法。选择唯一数据后,我想将 ID 和值也保存在数据库中,但我不知道如何处理只返回 JSON 值的代码。

public ActionResult BrokerSearch(string broker) {
    //Get BrokerName from database

    var drpList = HelperClass.GetBrokerDropDownValues("brokerCompanyName");
    //var dlist = drpList.ToList().Find(x => x.DropDownListValue.Contains(broker));
    //List<String> arr = drpList.Select(c =>  c.DropDownListValue.ToString()).ToList();
    List < String > arr = drpList.Select(c = > new {
        c.DropDownListValue, c.DropDownListId
    }.ToString()).ToList();

    return Json(arr.Where(t = > t.StartsWith(broker)), JsonRequestBehavior.AllowGet);

}

我的 Javascript 如下:

  $("#brokerCompanyName").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: baseurl + "/Policy/BrokerSearch",
            type: "POST",
            dataType: "json",
            data: {
                broker: request.term
            },
            success: function (data) {
                if (data != null && data != '') {
                    response($.map(data, function (item) {
                        return {
                            label: item,
                            value: item
                        };
                    }))

                } else {
                    $('ul[class*=ui-autocomplete]').hide();
                }
            }
        })
    },
    minLength: 1,
    cache: false,
    select: function (event, ui) {
        if (ui != null && ui.item != null) {

            $("#brokerCompanyName").val(ui.item.value);
        }
    }
});

【问题讨论】:

  • 是什么给你带来了麻烦?
  • 我不知道如何提取所选值的ID

标签: jquery json autocomplete


【解决方案1】:
<script>
    $(function () {
        $("#brokerCompanyName").autocomplete({

            source: function (request, response) {

                $.ajax({
                    url: "/Policy/BrokerSearch",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Text, value: item.Value };
                        }))
                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    });

</script>

【讨论】:

  • 虽然这可能会回答问题,但您至少应该在答案中添加一些解释。
猜你喜欢
  • 2017-09-18
  • 2012-06-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-27
  • 2016-01-04
  • 1970-01-01
相关资源
最近更新 更多