自定义jquery自动完成结果

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 自动完成插件会使用“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