Блог

Главная - Вопросы по программированию - Использование автозаполнения jQuery с нестандартными параметрами?

Использование автозаполнения jQuery с нестандартными параметрами?

#javascript #jquery #ajax #json #jquery-ui-autocomplete

#javascript #jquery #ajax #json #jquery-ui-автозаполнение

Вопрос:

Я хотел бы использовать автозаполнение jQuery в проекте Drupal для автоматического поиска узлов (фрагментов содержимого) с заданным заголовком. Я не могу найти ни одного примера использования опций, которые соответствуют тому, что я пытаюсь сделать, а именно:

  1. URL-адрес должен соответствовать шаблону: /api/node/title/{независимо от того, что ввел пользователь}
  2. Когда результаты возвращаются в формате JSON, заголовок должен использоваться в списке автозаполнения
  3. При нажатии на результат над текстовым полем появится стилизованный абзац, содержащий заголовок, но на самом деле он будет содержать идентификатор узла (nid) выбранного узла.

Вот что у меня есть до сих пор:

 jQuery(this).autocomplete({
    source: '/api/node/title/' jQuery(this).val(),
    minLength: 2
}).data( "autocomplete")._renderItem = function(ul, item) {
    return jQuery('<li />')
        .data("item.autocomplete", item)
        .appendTo(ul);
};

Я даже не стал беспокоиться о том, что делать после выбора элемента — URL-адрес отображается как /api/node/title?term={blank} , и хотя я получаю результаты JSON, ничего не появляется. Какие-либо предложения или примеры аналогичного использования? Примеры автозаполнения на веб-сайте jQuery UI не были особенно полезными.

РЕДАКТИРОВАТЬ: вот пример ожидаемого ответа.

 {
    "nid":"2",
    "vid":"2",
    "type":"lorem",
    "language":"und",
    "title":"Grid Computing",
    "uid":"0",
    "status":"1",
    "created":"1320092886",
    "changed":"1320273538",
    "comment":"1",
    "promote":"1",
    "sticky":"0",
    "tnid":"0",
    "translate":"0"
}

Комментарии:

1. не могли бы вы, пожалуйста, опубликовать пример ответа, который вы ожидаете от URL, и определить, что вы подразумеваете под заголовком?

Ответ №1:

для 1) вы можете использовать обратный вызов для источника

 $('input').autocomplete({
    source: autoDrupal,
    minLength: 2});

function autoDrupal(requestObject, responseCallback) {
   var url = '/api/node/title/'   requestObject.term;
   $.get(url, function(data) {
       // check my fiddle to transform drupal response in autocomplete result ;)
       responseCallback(data);
   });
};

для 2) Я не понимаю, что вы подразумеваете под «заголовком», но это, безусловно, можно обработать в ответе $.get
для 3) обработчик событий может сделать трюк (как только я пойму ваш страшный «заголовок»). что-то вроде этого:

 $('ul.ui-autocomplete').delegate('li', 'click', function () {
    $('#stuff').css('color', 'red');
})

проверьте и поиграйте с этой скрипкой 😉