jQuery的自动完成，如何解析使用URL信息一个JSON请求？ [英] jquery autocomplete, how to parse a json request with url info?

问题描述

我使用jQuery自动完成插件，但现在它是所有显示点击时行的下拉列表中，注入一词在输入框中。

I am using the jquery autocomplete plugin, but right now all it does is display a dropdown of rows that when clicked, injects the term into the input box.

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

What I want is for it to have a hyperlink, so when clicked, it redirects to the page.

是否有可能返回更丰富的JSON请求，在有其他元数据就像一个网址，图像，并会显示在自动完成框显示？

Is it possible to return a more rich json request, that has other meta data like a url, image and would be displayed in the autocomplete box that displays?

我已经看到了这个做了一个网站，但不知道他们是否有修改自动完成插件为它工作？即返回一个JSON响应，反对只是一个文本列表。

I've seen this done on a site, but not sure if they had to modify the autocomplete plugin for it to work? i.e. returning a json response as oppose to just a list of text.

推荐答案

如果你在谈论这个插件，下面应该工作：

If you're talking about this plugin, the following should work:

假设你的JSON结果看起来是这样的：

Assuming your json result looks something like this:

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

您需要在您自己的自定义分析功能来传递你的选择中。此功能需要返回的格式对象的数组： {数据：对象，值：字符串的结果：string}

You will need to pass in your own custom parsing function inside your options. This function needs to return an array of objects of the format: { 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;
});

有可能是一个更好的方式做链接，我知道我已经看到了其他的自动完成/建议类型的插件，允许你这样做更容易，但我不记得哪些。希望这有助于。

There might be a better way to do the link, and I know I've seen other autocomplete/suggest type plugins that allow you to do this easier but I don't remember which ones. Hope this helps.

这篇关于jQuery的自动完成，如何解析使用URL信息一个JSON请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！