我正在使用带有缓存的 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 将这个示例集成到现有的远程中。任何帮助将非常感激。非常感谢。
后续:按照 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 element is null。
最佳答案
演示图像部分的关键是重写 _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
调用转换结果数组之后缓存接收到的值。 - 这看起来很复杂,但只要记住答案顶部的两条准则就可以了。
关于jquery-ui - 将图像添加到带有缓存的 jQuery UI 自动完成远程源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12444110/