jquery-ui - 使用缓存将图像添加到 jQuery UI 自动完成远程源

Question

我正在使用带有缓存的 jQuery 自动完成远程源。 As per demo by jQUery UI website带有缓存的远程源的 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>

现在我想在上面的javascript中添加一些代码以在自动完成列表中显示图像。有一个很好的例子可以在 jQuery 自动完成中显示图像，例如:
http://jsfiddle.net/3zSMG/但它不包括缓存部分。

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

跟进:按照 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);
        }
    }
    }; 
});

和search.php的内容:

<?php
require_once "config.php";
$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
$qstring = "select id, subject as value, avatar from Suggests where subject LIKE '%".$term."%'";
$result = mysql_query($qstring);//query the database for entries containing the term
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
{
    $row['value']=htmlentities(stripslashes($row['value']));
    $row['id']=(int)$row['id'];
    $row['avatar']=$row['avatar'];
    $row_set[] = $row;//build an array
}
echo json_encode($row_set);//format the array into json data

?>

我能够在自动完成列表中看到图像。但是有一个问题:键入几个字母后，自动完成列表会显示出来，如果我继续添加更多随机字母以期望自动完成列表消失(因为用户输入不再匹配)但它没有。 Andrew's example work well .我的javascript有什么问题吗？尝试通过 Firebug 进行调试时，出现错误:TypeError 元素为空。

Answer 1

演示图像部分的关键是覆盖 _renderItem函数更改 li是为了建议项目而生成的。这通常意味着您的源是一个数组，其中的对象具有 label和/或 value属性，以及允许您在 _renderItem 内正确显示图像的属性.

缓存代码只存储搜索词并生成一个散列，然后在访问服务器之前查看该散列。

以您链接的 JSFiddle 为例，这里有一些使用 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);
    };
});​

备注 :

这个例子比 jQueryUI 网站上的例子更复杂，因为来自 API 的数据必须被转换(具有 avatar/value 属性)。需要注意的重要一点是，我们在 $.map 之后缓存接收到的值。 call 转换结果数组。

这看起来很复杂，但只要记住答案顶部的两条准则，你就应该很好。

示例: http://jsfiddle.net/rK7TS/