jQuery UI Autocomplete с MVC не может отобразить возвращенные элементы - PullRequest
Новая
       4

jQuery UI Autocomplete с MVC не может отобразить возвращенные элементы

1 голос
/ 18 октября 2011

Я уже некоторое время бьюсь над этой проблемой, и я не уверен, что делаю неправильно.

У меня очень простой JSON-вызов одного из моих контроллеров, который яхотите вернуть имена клиентов вместе с соответствующими значениями идентификаторов, используя автозаполнение jquery ui.Я вижу результаты в Firebug, но автозаполнение всегда возвращает пустой список.

Количество элементов в списке, сгенерированном jquery, является правильным - например, если мне возвращают 3 результата, я вижу меню предложения с 3 пустыми элементами списка.Кажется, проблема в том, что jquery неправильно анализирует мой ответ.

Я не использую проверку jquery в текстовом поле, как предлагали некоторые другие вопросы здесь.

Я запускаю это локальноесли это имеет значение.

Ниже приведен jquery / HTML, который я использую: 

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">        google.load("jquery", "1.6.4")</script>
<script type="text/javascript">        google.load("jqueryui", "1.8.16")</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#clientEntered").autocomplete({
            source: '@Url.Action("ClientAutoSuggest", "Clients")'
        });
    });

</script>

<input type="text" name="clientEntered" id="clientEntered" />

Мой контроллер выглядит примерно так: 

public JsonResult ClientAutoSuggest(string term)
    {
        var filteredClients = (from c in clientService.GetClients()
                               where c.Name.ToLower().StartsWith(term.ToLower())
                              select new { ClientID = c.ClientID, Name = c.Name }).Take(10);

        return Json(filteredClients, JsonRequestBehavior.AllowGet);
    }

Как упоминалось выше,Я вижу результаты, переданные обратно в Firebug, но сгенерированный список всегда пуст.

Пример - если будут возвращены 2 результата, я увижу 2 результата в Firebug: 

[{"ClientID":1,"Name":"Client 1"},{"ClientID":2,"Name":"Client 2"}]

Если я посмотрю на сгенерированный источник, я увижу следующее (правильные 2 элемента, но пустые):

<ul style="z-index: 1; top: -16px; left: 0px; display: block; width: 1864px; position: relative;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li></li><li></li></ul>

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

РЕДАКТИРОВАТЬ: все получилось благодаря ответу Кевина ниже.Проблема заключалась в неправильном отображении ответа.Код ниже отлично работает сейчас. 

$("#clientEntered").autocomplete({
            source: function(request, response) {
            $.ajax({
              url: '@Url.Action("ClientAutoSuggest", "Clients")',
              data: request,
              dataType: "json",
              type: "POST",
              success: function(data){
                  response($.map(data,function(item){
                  return { label: item.Name,value: item.Name, id: item.ClientId }
                  }));
              }
            });
           },
        });

1 Ответ

5 голосов
/ 18 октября 2011

Я не вижу никакой ссылки 2 на самом деле автозаполнение JS? Возможно, у вас есть это где-то еще, но я просто хотел сообщить вам.

Настоящая проблема, вероятно, вызвана вашим действием @ Url.Action. Он просто выполнит это действие и вернет результаты. ** * Нет привязки к текстовому полю.

Лучшей практикой будет просто сделать простой вызов Ajax и выполнить сопоставление при получении ответа.

Должно быть что-то вроде этого, просто написал это быстро, поэтому не стреляйте в меня, но вы должны получить картину;) 

$("#clientEntered").autocomplete({
            source: function(request,response)
            {
               $.ajax({
                 url: "/Clients/ClientAutoSuggest",
                 type:"POST",
                 dataType:"json",
                 data: { term: request.term },
                 success:function(data){
                    response($.map(data,function(item){
                      return { label: item.Name,value: item.Name, id: item.ClientId
                    }))
                 }

                })
            }
});
...