Jquery ui 将映像添加到jQuery UI自动完成带缓存的远程源

我正在使用jQuery自动完成远程源代码和缓存。带有缓存的远程源的javascript是

<script>
$(function() {
    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 );
                }
            });
        }
    });
});
</script>

$（函数（）{
var cache={}，
lastXhr；
$（“#鸟”）.autocomplete({
最小长度：2，
来源：功能（请求、响应）{
var term=request.term；
if（缓存中的术语）{
响应（缓存[术语]）；
返回；
}
lastXhr=$.getJSON（“search.php”、请求、函数（数据、状态、xhr）{
缓存[术语]=数据；
如果（xhr==lastXhr）{
答复（数据）；
}
});
}
});
});

现在我想在上面的javascript中添加一些代码，以便在自动完成列表中显示图像。在jQuery autocomplete中显示图像有一个很好的例子，例如： 但它不包括缓存部分

我一直在尝试，但无法将此示例集成到现有的远程缓存javascript中。任何帮助都将不胜感激。非常感谢

后续：根据Andrew Whitaker的建议，我已将我的脚本更新如下：

<script>
$(function() {
    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 ) {
                var results;
                if ( xhr === lastXhr ) {
                    results = $.map(data, function(item) {
                        return {
                        value: item.value,
                        avatar: item.avatar
                        };
                    });
                    cache[term] = results;
                    response(results);
                }                   
            });
        },
    }).data("autocomplete")._renderItem = function (ul, item) {
    if ( item.value != null ) {
        if ( item.avatar != null) {
            return $("<li/>")
                .data("item.autocomplete", item)
                .append("<a><img src='images/" + item.avatar + "' />" + item.value + "</a>")
                .appendTo(ul);
            }
        else {
            return $("<li/>")
                .data("item.autocomplete", item)
                .append("<a>" + item.value + "</a>")
                .appendTo(ul);
        }
    }
    }; 
});

$（函数（）{
var cache={}，
lastXhr；
$（“#鸟”）.autocomplete({
最小长度：2，
来源：功能（请求、响应）{
var term=request.term；
if（缓存中的术语）{
响应（缓存[术语]）；
返回；
}
lastXhr=$.getJSON（“search.php”、请求、函数（数据、状态、xhr）{
var结果；
如果（xhr==lastXhr）{
结果=$.map（数据、函数（项）{
返回{
值：item.value，
化身：item.avatar
};
});
缓存[术语]=结果；
答复（结果）；
}                   
});
},
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
如果（item.value！=null）{
如果（item.avatar！=null）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“.我的javascript有什么问题吗？试图通过Firebug进行调试时，出现了错误：TypeError元素为null

演示图像部分的键覆盖
\u renderItem
函数，以更改为建议项目而生成的
li
。这通常意味着您的源是一个数组，其中包含具有
标签和/或
值
属性以及允许您显示的属性的对象将图像正确地显示在renderItem的内部

缓存代码只是将搜索词和结果存储在散列中，并在命中服务器之前查找该散列

以您链接的JSFIDLE为例，下面是使用StackOverflow的API进行缓存和图像处理的示例：

$(document).ready(function() {
    var cache = {},
        lastXhr;

    $("#auto").autocomplete({
        source: function(request, response) {
            var term = request.term;

            if (term in cache) {
                response(cache[term]);
                return;
            }

            lastXhr = $.ajax({
                url: "http://api.stackoverflow.com/1.1/users",
                data: {
                    filter: request.term,
                    pagesize: 10
                },
                jsonp: "jsonp",
                dataType: "jsonp",
                success: function(data, status, xhr) {
                    var results;
                    if (xhr === lastXhr) {
                        results = $.map(data.users, function(el, index) {
                            return {
                                value: el.display_name,
                                avatar: "http://www.gravatar.com/avatar/" + el.email_hash
                            };
                        });

                        cache[term] = results;
                        response(results);                                 
                    }
                }
            });
        },
        delay: 500
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img src='" + item.avatar + "' />" + item.value + "</a>")
            .appendTo(ul);
    };
});​

$（文档）.ready（函数（）{
var cache={}，
lastXhr；
$（“#自动”）.autocomplete({
来源：功能（请求、响应）{
var term=request.term；
if（缓存中的术语）{
响应（缓存[术语]）；
返回；
}
lastXhr=$.ajax({
url:“http://api.stackoverflow.com/1.1/users",
数据：{
过滤器：request.term，
页面大小：10
},
jsonp：“jsonp”，
数据类型：“jsonp”，
成功：功能（数据、状态、xhr）{
var结果；
如果（xhr==lastXhr）{
结果=$.map（data.users，函数（el，索引）{
返回{
值：el.display\u name，
阿凡达：“http://www.gravatar.com/avatar/“+el.email\u hash
};
});
缓存[术语]=结果；
答复（结果）；
}
}
});
},
延误：500
}).数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“
以下是我所做的：

    lastXhr = $.getJSON( action, request, function( data, status, xhr ) {

        if( data && data !== null ) {
            var results;
            if( xhr === lastXhr ) {
                results = $.map(data, function(item) {
                    return {
                        value: item.value,
                        avatar: item.avatar
                    };
                });
                cache[term] = results;
                response(results);
            }
        } else {
            response([{ value: 'No results found.', avatar: null}]);
        }

    });

谢谢Andrew。但是仍然存在一个问题：当userinput不再匹配时，自动完成列表不会消失。您的演示会抛出一个错误
Uncaught SyntaxError:Unexpected token
    lastXhr = $.getJSON( action, request, function( data, status, xhr ) {

        if( data && data !== null ) {
            var results;
            if( xhr === lastXhr ) {
                results = $.map(data, function(item) {
                    return {
                        value: item.value,
                        avatar: item.avatar
                    };
                });
                cache[term] = results;
                response(results);
            }
        } else {
            response([{ value: 'No results found.', avatar: null}]);
        }

    });