Проблема с автозаполнением текстового поля с использованием jquery в asp.net mvc - PullRequest
Новая
       5

Проблема с автозаполнением текстового поля с использованием jquery в asp.net mvc

3 голосов
/ 24 ноября 2011

Мне нужно создать текстовое поле автозаполнения для заполнения имен клиентов в приложении ASP.Net MVC. Код JQuery на мой взгляд выглядит следующим образом: 

$(document).ready(function() {
    $("input#bldCustomerName").autocomplete({
        source: '<%= Url.Action("ListCustomers","Build") %>'
    });
});

Мое действие контроллера: 

public ActionResult ListCustomers(string term)
    {
        IList<HSTrader> lstTraders = new List<HSTrader>();
        Build objBld = new Build();
        string trdrType = Resources.Resource.TraderTypeCustomer;
        int trdrTypeId = objBld.GetTraderTypeByTraderTypeName(trdrType).Id;
        lstTraders = objBld.GetTradersByTraderType(trdrTypeId);

        var results = from m in lstTraders
                      where m.TraderName.StartsWith(term)
                      select m.TraderName; //new { label = m.TraderName, id = m.Id };

        return Json(results.ToArray(), JsonRequestBehavior.AllowGet);
    }

Вкл. keypress действие контроллера выполнено, но список не отображается под текстовым полем. Что не так с моей реализацией?

Ответы [ 2 ]

1 голос
/ 07 мая 2012 
 $(document).ready(function () {
            $('input#bldCustomerName').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Build/ListCustomers', type: 'Get', dataType: 'json',
                        data: { term: request.term, maxResults: 10 },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.TraderName, value: item.TraderName, id: item.TraderName }

                                //return { label: item.d, value: item.d, id: item.d } 
                                //If it does not work then use this line. comment above line. it is for single dimension array (only one column.).
                            }))
                        }
                    });
                },
                select: function (event, ui) {

                }
            });
        });






        //BuildController
        [HttpGet]
        public JsonResult ListCustomers(string term, int maxResults)
        {
            IList<HSTrader> lstTraders = new List<HSTrader>();
            Build objBld = new Build();
            string trdrType = Resources.Resource.TraderTypeCustomer;
            int trdrTypeId = objBld.GetTraderTypeByTraderTypeName(trdrType).Id;
            lstTraders = objBld.GetTradersByTraderType(trdrTypeId);

            var results = from m in lstTraders
                          where m.TraderName.StartsWith(term)
                          select m.TraderName; //new { label = m.TraderName, id = m.Id };

            return Json(results.Take(maxResults).ToList(), JsonRequestBehavior.AllowGet);
        }
0 голосов
/ 10 июня 2014

Надеюсь, это кому-нибудь поможет ...

Мне пришлось добавить библиотеки jquery-ui и таблицы стилей, потому что они не поставлялись с шаблоном VS2013 Scripts. Вот пример автозаполнения с помощью db query и TextBoxFor, который работал для меня:

WordListController.cs: 

public ActionResult Test2(MyModel vm)
{
    return View(vm);
}
public JsonResult AutoComplete(string search)
{
    var result = (from r in db.Words
                  where r.Word.ToLower().StartsWith(search.ToLower())
                  select r.Word).Take(10).ToArray();

    return Json(result, JsonRequestBehavior.AllowGet);
}

Test2.cshtml: 

@{
    ViewBag.Title = "test2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/jqueryuicss")

@model  WLWeb.Models.MyModel

<h2>test2</h2>

<script>

        $(function () {
            $('#tags').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete", "WordList")',
                        dataType: "json",
                        contentType: 'application/json, charset=utf-8',
                        data: {
                            search: $("#tags").val()
                        },
                        success: function (data) {

                            response($.map(data, function (item) {
                                return {
                                    label: item
                                };
                            }));
                        },
                        error: function (xhr, status, error) {
                            alert(error);
                        }
                    });
                },
                minLength: 2
            });
        });

</script>

    @Html.TextBoxFor(x => Model.SelectionModel.SearchString, new { @id = "tags", style = "width:120px;" })

Layout.csthml: 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")

</head> 
<body>
...
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

BundleConfig.cs: 

...
        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.custom.js"));

        bundles.Add(new StyleBundle("~/Content/jqueryuicss").Include(
                  "~/Content/jquery-ui-{version}.custom.css"));
...