MVC3 Razor JQuery автозаполнение передает значения назад, но ничего не отображается - PullRequest
Новая
       21

MVC3 Razor JQuery автозаполнение передает значения назад, но ничего не отображается

2 голосов
/ 19 октября 2011

У меня проблемы с функцией автозаполнения, она попадает в контроллер и возвращает значения, но на странице ничего не отображается, я предоставил код ниже, любая помощь приветствуется.

HomeControllerMethod 

[HttpPost]
    public JsonResult  GetAccounts(string id)
    {
        var accounts = NavRepository.GetAccountsBasedOnString(id);

        return Json(accounts, JsonRequestBehavior.AllowGet);
    }

About.cshtml 

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">      </script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">      </script>


<script type="text/javascript">
$(function () {
    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                success: function (event, ui) {
                    searchTerm.valueOf (ui.item.value);
                }
            });
        } 
    });
});

</script>

@using (Html.BeginForm())
{               
<form method="post" action="">
 <input id="searchTerm" name="searchTerm" type="text" />
     <input type="submit" value="Go" />
 </form>
}

Редактировать: Ниже моя последняя функция 

  $(function () {
    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                success: function (data) {
                    response(data); ;
                }
            });
        } 
    });
});

1 Ответ

3 голосов
/ 19 октября 2011

Несколько вещей:

  1. Вам необходимо вызвать функцию response, которую виджет предоставляет функции source, которую вы предоставляете.Кроме того, похоже, что у вас есть одна из опций автозаполнения (minLength), смешанная с вызовом AJAX: 

    $('#searchTerm').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetAccounts", "Home")',
            data: { id: request.term },
            dataType: 'json',
            type: 'POST',
            success: function (data) {
                response(data); // You may have to perform post-processing here depending on your data.
            }
        });
    },
    minLength: 3
});

  2. Кроме того, убедитесь, что вы предоставляете виджетс данными, которые он ожидает.Вам необходимо предоставить функции response массив строк, например: 

    ["Item1", "Item2", "Item3"]

    В качестве альтернативы, вы можете предоставить массив объектов со свойством label , Значение свойство, или оба: 

    [{ label: "Item1", value: "1" }, { label: "Item2", value: "2" }]

    Возможно, вы уже делаете это, но мне нужно будет посмотреть, что возвращает действие вашего контроллера.

...