自定义 jquery 自动完成结果

Posted 2023-02-24

【中文标题】自定义 jquery 自动完成结果

【英文标题】：Customize jquery autocomplete result

【发布时间】：2011-09-08 08:53:36

【问题描述】：

我正在使用带有远程数据源的 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...

那么有没有办法在自动完成返回的 JSON 中包含活动 ID？

谢谢

【问题讨论】：

你将把这个 id 保存在哪里？客户端或数据库

【参考方案1】：

如果您的 index.php/ajax/autosuggest 页面返回一个 JSON 对象数组，其中包含“标签”和“值”两个键（而不是字符串数组），则 jQuery UI 自动完成插件使用“标签” " 键显示在自动完成列表中，但实际上为您提供了在 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

【讨论】：

实际上，在重新阅读该页面后，可能会涉及更多工作。我不喜欢在这个上开枪......现在还早。

【参考方案2】：

Wesley 描述的方式也是我们目前正在使用的方式。

通过在我们的 JSON 对象中同时返回 label 和 id，我们可以在使用标签的同时以我们想要的方式获取该 id（在我们的例子中，将其存储在隐藏的输入中）向我们的用户显示选择了哪条记录。

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

【参考方案3】：

您使用的是哪个数据源？我强烈建议 freebase 它是一个包含超过 1200 万个声音的免费数据库，它为最杂项领域（工作、体育、演员、电影或随心所欲）...不是每个人都知道它，但谷歌去年购买了这个项目（它仍然可用且免费），因此它应该是一个很有前途的数据源网络服务。