2013-11-19 2 views
1

У меня есть следующая строка представление реального объекта JSON вернулся из моей службы:Присвоить JSON автозаполнение

[ 
    { 
    "label": "#1 Pizza [99999]", 
    "value": "99999" 
    }, 
    { 
    "label": "001 Test Facility [99998]", 
    "value": "99998" 
    } 
] 

Я пытаюсь поместить это в автозаполнения JQuery. Но у меня нет четкого представления, почему я не вижу данных в этом контроле.

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

Вот мой разметки/скрипт

<script type="text/javascript"> 

function processFacilities(data) { 
    response($.map(data, function (value, key) { 
     alert(data); 
     return { 
      label: value, 
      value: key 
     }; 
    })); 
}; 

$('#tags').autocomplete({ 
    source: function (request, response) { 
     $.getJSON('FacilitiesAsync', 'sourceDb=myDb', processFacilities); 
    }, 
    minLength: 2, 
    delay: 100 
}); 

</script> 

Мой класс возвращает метку и значение, как я видел, было необходимо от поста ниже. Чем отличается в том, что мои данные в формате JSON не имеет что-то перед ним, чтобы идентифицировать его, например: [ «объекты»: {...} и т.д.]

jQuery UI autocomplete with JSON

+0

Вы пробовали код в этом примере http://jqueryui.com/autocomplete/#remote-jsonp. 'response' - ваш корневой элемент – alex

ответ

1

Это моя реализация, и она отлично работает ...

$("#autocomplete").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "/api/controller/", 
       type: 'GET', 
       cache: false, 
       data: request, 
       dataType: 'json', 
       success: function (json) { 
        // call autocomplete callback method with results 
        response($.map(json, function (name) { 
         return { 
          label: name.Name, 
          value: name.ID 
         }; 
        })); 
       }, 
       error: function (xmlHttpRequest, textStatus, errorThrown) { 
        $("#autocomplete").text(textStatus + ', ' + errorThrown); 
       } 
      }); 
     }, 
     select: function (event, ui) { 
      $('#autocomplete').val(ui.item.label); 
      $('#selectedLocationId').val(ui.item.value); 
      return false; 
     }, 
     messages: { 
      noResults: '', 
      results: function() { 
      } 
     } 
    }); 

чтобы перевести это в вашей версии ...

$("#autocomplete").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "FacilitiesAsync/", 
      type: 'GET', 
      cache: false, 
      data: request, 
      dataType: 'json', 
      success: function (json) { 
       // call autocomplete callback method with results 
       response($.map(json, function (name) { 
        return { 
         label: name.Name, 
         value: name.ID 
        }; 
       })); 
      }, 
      error: function (xmlHttpRequest, textStatus, errorThrown) { 
       $("#autocomplete").text(textStatus + ', ' + errorThrown); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     $('#autocomplete').val(ui.item.label); 
     return false; 
    }, 
    messages: { 
     noResults: '', 
     results: function() { 
     } 
    } 
}); 
+0

Я реализовал ваш код, и я не вижу, как Task теперь вызывается в коде. Я добавил несколько предупреждений, чтобы узнать, вызвано ли это, и это не так. Я хотел бы назвать это, когда страница загружается, поэтому я могу получить данные в фоновом режиме и загрузить их в элемент управления ввода –

+0

Хорошо, теперь я вижу что-то! Я помещаю ваш код внутри $ (document) .ready (function() {}); И теперь я вижу, что что-то появляется в автозаполнении .... –

1

Это должно работать:

$('#tags').autocomplete({ 
    source: "/path/to/script", 
    minLength: 2, 
    delay: 100 
}); 

source option is a string Когда:

Строка: Когда строка используется, плагин автозаполнения ожидает, что строка, чтобы указать на URL ресурса, который будет возвращать данные в формате JSON. Он может находиться на том же хосте или на другом (должен предоставить JSONP). Плагин Autocomplete не фильтрует результаты, вместо строки запроса добавляется строка с полем термина, для которого серверный сценарий должен использовать для фильтрации результатов. Например, если исходная опция установлена ​​в http://example.com, и пользовательские типы foo, запрос GET будет сделан в http://example.com?term=foo. Сами данные могут быть в том же формате, что и локальные данные, описанные выше.

Смежные вопросы