自定义jQuery的自动完成结果

我使用jQuery自动完成与远程数据源自定义jQuery的自动完成结果

$("input#searchbar").autocomplete({ 
     source: function(request, response) { 
      $.ajax({type: "post", 
      mode: "abort", 
      dataType: 'json', 
      url: 'index.php/ajax/autosuggest', 
      data: { term: $("#searchbar").val()}, 
      success: function(data) { 

       response(data); 
      } 
     }); 
    }, 
    select: function(e, ui) { 
     //Refresh pros 
     if (map){ 
      mouseUpOnTheMap(); 
     } 
    } 
});

它的作品真的很好。当我键入“a”时，会列出以该列表开头的活动列表（从数据库提取）。我想要做的是在结果中添加一个自定义参数（活动的ID）。

因为当用户选择稍后的活动，我将不得不“重新做”一个sql搜索，获得该活动的ID ...

那么，有没有办法，包括在活动ID从自动完成中返回JSON？

感谢

来源

2011-06-04 Fazoulette

你将在哪里保存该ID？客户端或DB – zod 2011-06-04 13:14:30

如果您的index.php/AJAX /自动提示页面返回JSON数组与“标签”和“值”（而不是字符串数组），则在jQuery UI的自动完成的两个键对象插件，使用“label”键显示在自动完成列表中，但实际上会为您提供在select事件中选择的JSON对象。然后你可以引用对象的值。

$("input#searchbar").autocomplete({ 
     source: function(request, response) { 
      $.ajax({type: "post", 
      mode: "abort", 
      dataType: 'json', 
      url: 'index.php/ajax/autosuggest', 
      data: { term: $("#searchbar").val()}, 
      success: function(data) { 
       //data assumes [{label: "result 1", value: 1}, {label: "result 2", value: 2}]; 
       response(data); 
      } 
     }); 
    }, 
    select: function(e, ui) { 
     var selectedItem = ui.item; 
     var id = selectedItem.value; 
     var label = selectedItem.label; 

     //Refresh pros 
     if (map){ 
      mouseUpOnTheMap(); 
     } 
    } 
});

我没有测试编辑方针，只是在这里找到：http://www.petefreitag.com/item/756.cfm

来源

2011-06-04 13:29:01 WesleyJohnson

实际上，在重新阅读该页面后，可能会涉及更多的工作。我的这个跳枪不好......现在还早。 – WesleyJohnson 2011-06-04 13:32:10

韦斯利描述的方法是什么，我们目前正在使用为好。

通过返回我们的JSON对象，我们都能够抓住该ID处理它在我们想要的方式（在我们的情况下，将其存储在一个隐藏的输入）都label和id，而标签被用来展示我们的选择记录的用户。

基本例如：http://jsfiddle.net/NLK5p/4/

来源

2011-06-22 22:57:29

哪个数据源是您使用？我强烈建议freebase它是一个拥有超过12百万声音的免费数据库，它为大多数杂志（作业，体育，演员，电影或任何你想要的）领域的自我暗示（包括js功能）提供web服务。 ..不是每个人都知道它，但谷歌去年购买了该项目（它仍然可用和免费），所以它应该是一个有前途的数据源Web服务。

来源

2011-06-23 14:04:02

自定义jQuery的自动完成结果

回答

相关问题