jquery自动完成，如何解析带有url信息的json请求？

Question

我正在使用 jquery 自动完成插件，但现在它所做的只是显示一个下拉列表，单击该下拉列表会将术语注入输入框。

我想要的是它有一个超链接，所以当点击它时，它会重定向到页面。

是否可以返回更丰富的 json 请求，该请求具有其他元数据，例如 url、图像，并且会显示在显示的自动完成框中？

我在一个网站上看到过这种做法，但不确定他们是否必须修改自动完成插件才能使其正常工作？即返回一个 json 响应，而不是一个文本列表。

Answer 1

如果您在谈论this plugin，以下应该可以工作：

假设您的 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;
});

可能有更好的方法来建立链接，我知道我见过其他自动完成/建议类型的插件可以让你更轻松地做到这一点，但我不记得是哪些。希望这会有所帮助。