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变量）。这允许我发送（特别是发布）多于1个变量到返回JSON响应的php脚本。在我的情况下，这是必要的，因为我使用令牌来防止未经授权访问搜索功能。

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返回的JSON？option = com_eat＆amp; view = search＆amp; format = raw看起来像：

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

页面上的HTML如下所示：

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

Answer 2

真正的问题在于我 JSON数据从响应中进入自动填充结果

只需查看代码，看起来自动填充应该正确填充。你确定数据会回来吗？如果您遇到问题，请尝试使用本地数据源并查看问题是否仍然存在。

如果点击其中任何一个，它就会指示 data.url的页面。

您可以通过为select事件定义事件处理程序来完成此任务：

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

ui.item是指在下拉列表中选择的项目。

以下是此工作的示例（使用本地数据源）：http://jsfiddle.net/andrewwhitaker/KBpXh/

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

2 个答案: