php - 自定义 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 页面返回一个包含“label”和“value”两个键的 JSON 对象数组(而不是字符串数组)，jQuery UI 自动完成插件使用“label” "键显示在自动完成列表中，但实际上为您提供了在选择事件中选择的 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