jquery 自动完成 json 和可点击的链接

Question

我已经这样做了一段时间，但进展非常缓慢，主要是因为我的 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 填充，如果单击其中任何一个，它会将页面定向到 data.url。

对我来说真正的问题是将响应中的 JSON 数据获取到自动完成结果中。网上没有太多适合我的情况的例子，我也找不到。

感谢您的帮助。

Answer 1

我设法解决了我的问题，请参见下文(注意:$token 是一个 php 变量)。这允许我向返回 JSON 响应的 php 脚本发送(特别是发布)多个变量。就我而言，这是必要的，因为我使用 token 来防止未经授权的访问搜索功能。

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
  });
});

从index.php?option=com_eat&view=search&format=raw 返回的 JSON 如下所示:

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

页面上的 HTML 如下所示:

<input type="text" size="30" id="search" />