JQuery автозаполнение, как проанализировать JSON-запрос с URL-информацией?

Question

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

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

Можно ли вернуть более богатый JSON-запрос, который имеет другие метаданные, такие как URL, изображение и будет отображаться в поле автозаполнения, которое отображается?

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

Answer 1

Если вы говорите о этом плагине , должно работать следующее:

Предположим, что ваш результат в формате json выглядит примерно так:

[
  {
    name: 'Google',
    image: 'http://google.com/logo.png',
    href: 'http://google.com'
  },
  {
    name: 'Bing',
    image: 'http://bing.com/logo.png',
    href: 'http://bing.com/'
  }
  ...
]

Вам нужно будет передать свою собственную функцию синтаксического анализа внутри ваших опций. Эта функция должна возвращать массив объектов в формате: { data: object, value: string, result: string }

$('#myfield').autocomplete('/search', {

  parse: function(data) {
    return $.map(data, function(item) {
      return { data: item, value: item.name, result: item.href };
    });
  },

  formatItem: function(item) {
    return '<img src="' + item.image + '"/> ' + item.name;
  }

})
.result(function(event, item) {
  location.href = item.href;
});

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