jQuery-ui AutoComplete с предложениями ASP MVC, не отображающих

Question

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

Вот библиотеки JS, которые я включаю:

<script type="text/javascript" language="javascript" src="/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript" language="javascript" src="/Scripts/jquery-ui-1.8.1.custom.min.js"></script>

 <link href="/Content/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />

А вот JavaScript и теги форма:

<script type="text/javascript">
    $(function () {

        $("#organization").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Organization/OrganizationLookup',
                    dataType: "json",
                    data: {
                        limit: 12,
                        q: request.term
                    }
                })
            },
            minLength: 2
        });
    });
</script> 

<div class="ui-widget"> 
    <label for="organization">Organization: </label> 
    <input id="organization" /> 
</div> 

Я вернул ответ JSON, который выглядит разумным от моего контроллера:

[
  {
    "id":"Sector A",
    "value":"Sector A"
  },
  {
    "id":"Sector B",
    "value":"Sector B"
  },
  {
    "id":"Sector C",
    "value":"Sector C"
  }
]

ID и значение, кажется, по умолчанию называется, что ищет автозаполнение.

Но я не получаю никакой радости вообще. Есть предположения?

Answer 1

Не проблема здесь - вы должны поставить CSS перед JavaScript. Всегда.

Вы ничего не делаете с возвращаемой стоимостью. Вам необходимо использовать функцию обратного вызова, чтобы принять эти данные и сделать что-то с ним. («Успех:« Параметр, я верю).

Answer 2

Благодаря договору Хогана я добавил следующую функцию обратного вызова к параметру успеха, и мне было хорошо, чтобы пойти:

 success: function (data) {
                          response($.map(data, function (item) {
                              return {
                                  label: item.label,
                                  value: item.value
                              }
                          }))