jQuery UI自动完成 - 在'source'中使用多维数组值,缓存示例

Question

我试图修改jQuery UI的这个例子来接受二维JSON数据. http://jqueryui.com/demos/autocomplete/#remote-with-cache

    var cache = {}, lastXhr;
    $( "#birds" ).autocomplete({
        minLength: 2,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        }
    });

我如何修改它以使用JSON数据中的'name'值,如下所示:

[{"name":"TEST1","slug":"blah-blah"},{"name":"TEST","slug":"example-slug-here"}]

Answer 1

自动完成小部件需要以下格式的数据:

本地数据可以是一个简单的字符串数组,也可以包含数组中每个项目的对象,带有标签或值 属性或两者.label属性显示在建议菜单中.用户从菜单中选择了某些内容后,该值将插入到input元素中.如果只指定了一个属性,则它将用于两者

(强调我的)

这并不意味着您不能使用不响应该格式的远程源; 在调用提供的response函数之前,您可以按摩数据以满足这些要求.

考虑到这一点,我会修改您的案例示例如下:

lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
    cache[ term ] = $.map(data, function(item) {
        return {
            label: item.name,
            value: item.name,
            slug: item.slug,
            name: item.name
        };
    });
    if ( xhr === lastXhr ) {
        response( data );
    }
});

这应该使结果正确显示(并且缓存应该仍然可以正常工作).有关此的另一个示例,请查看远程JSONP示例.