JQuery Автозаполнение JSON и кликабельная ссылка через - PullRequest
Новая
       15

JQuery Автозаполнение JSON и кликабельная ссылка через

2 голосов
/ 21 февраля 2011

Я занимаюсь этим некоторое время, и я делаю очень медленный прогресс, в основном потому, что мои навыки jquery нуждаются в улучшении, хотя я пытаюсь:)

У меня есть этот код: 

jQuery(function() {
  jQuery("input#search").autocomplete({
    minLength: 2,
    source: function(request, response) { 
      jQuery.post("index.php?option=com_eat&view=search&format=raw", { 
        "'.$token.'": "1",
        search_string: request.term
      }, function(data) { 
        response( jQuery.map( data, function( item ) {
          return {
            value: item.name,
            url: item.url
          }
        }));
      }, "json"); 
    }
  });
});

Возврат из поста - json в форме: 

data.url = some_url;
data.name = some_name;

Я хочу, чтобы автозаполнение заполнялось именем json data.name, и если щелкнуть любой из них, он перенаправит страницу на данные.url.

Реальная проблема для меня - получение данных JSON из ответа в результаты автозаполнения.В Интернете не так много примеров этого, которые бы соответствовали моим обстоятельствам, и я не могу найти ни одного.

Спасибо за любую помощь.

Ответы [ 2 ]

12 голосов
/ 21 февраля 2011

Мне удалось решить мою проблему, см. Ниже (ПРИМЕЧАНИЕ: $ token - это переменная php). Это позволяет мне отправлять (в частности, публиковать) более 1 переменной в скрипт php, который возвращает ответ JSON. В моем случае это необходимо, поскольку я использую токен для предотвращения несанкционированного доступа к функциям поиска. 

jQuery(function() {
  jQuery("#search").autocomplete({
    source: function(request, response) {
      jQuery.ajax({
        url: "index.php?option=com_eat&view=search&format=raw",
        type: "post",
        dataType: "json",
        data: {
          search_string: request.term,            
          "'.$token.'": "1"
        },
        success: function(data) {
          response(jQuery.map(data, function(item) {
            return {
                url: item.url,
                value: item.name
            }
          }))
        }
      })
    },
    select: function( event, ui ) {
      window.location.href = ui.item.url;
    },
    minLength: 2
  });
});

Возвращенный JSON из index.php? Option = com_eat & view = search & format = raw выглядит так: 

[{"url":"url1", "name":"name1"}, {"url":"url2", "name":"name2"}, ...]

HTML-код на странице выглядит так: 

<input type="text" size="30" id="search" />
2 голосов
/ 21 февраля 2011

Реальная проблема для меня - получение Данные JSON из ответа в результаты автозаполнения

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

если щелкнуть любой из них, он направит страницу к data.url.

Вы можете сделать это, определив обработчик события для события select: 

$("input").autocomplete({
    /* Snip */
    select: function(event, ui) {
        window.location = ui.item.url;
    }
});

ui.item относится к элементу, выбранному в раскрывающемся списке.

Вот пример этой работы (с локальным источником данных): http://jsfiddle.net/andrewwhitaker/KBpXh/

...