Question

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

感谢

Answer 1

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

Answer 2

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

通过在我们的JSON对象中返回label和id，我们能够以我们想要的方式获取id处理它（在我们的例子中，将其存储在隐藏的输入中），而label用于向我们的用户显示选择的记录。

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

Answer 3

您使用的是哪个数据源？我强烈建议 freebase 这是一个超过1,200万个声音的免费数据库，它为最杂乱的领域（工作，体育，演员，电影或者工作）中的自我提供（包括js功能）提供网络服务。无论你想要什么）...不是每个人都知道它，但谷歌去年买了这个项目（它仍然可用和免费）所以它应该是一个很有前途的数据源Web服务。

自定义jquery自动完成结果

3 个答案: