Only show YUI autocomplete footer when there are 5 results
I would like the autocomplete to display a footer which says Displaying top 5 results
only when there are 5 results actually being displayed.
So far, I have it set up so that it won't display if at first there are less than 5 results, but once 5 results have been loaded the footer always displays, regardless of how many results are actually being displayed.
Please excuse the silly flip
gimmick.
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
var sKey = sResultMatch
// Extract the part of the match that the user did not type
var sKeyRemainder = sKey.substr(sQuery.length);
oAC.setFooter("");
var aMarkup = ["<div class='myCustomResult'>",
"<span style='font-weight:bold'>",
sQuery,
开发者_如何学运维 "</span>",
sKeyRemainder,
"<br>",
"</div>"];
if (oResultData[2] >= 4) {
flip = true;
}
if (flip) {
oAC.setFooter("<div style=\"margin-left:5px;\"><span style=\"font-weight:bold;\">See more results for " + sQuery + "</span><br>Showing top 5 results</div>");
}
return (aMarkup.join(""));
};
Instead of trying to set it in the formatResult
function, I tried using the doBeforeExpandContainer
function, and it works like a charm.
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
var sKey = sResultMatch
// Extract the part of the match that the user did not type
var sKeyRemainder = sKey.substr(sQuery.length);
oAC.setFooter("");
var aMarkup = ["<div class='myCustomResult'>",
"<span style='font-weight:bold'>",
sQuery,
"</span>",
sKeyRemainder,
"<br>",
"</div>"];
oAC.setFooter("<div class=\"ac-footer\"><div class=\"ac-footer-content\"><a class=\"ac-footer-link\" href=\"#\" onclick=\"spandex(this,event,'filter-company');return false;\">See more results for <b>" + sQuery + "</b></a><br><span class=\"ac-footer-sub\">Showing top 5 results</span></div></div>");
return (aMarkup.join(""));
};
oAC.doBeforeExpandContainer = function(sQuery, oResponse) {
if (oAC._nDisplayedItems <= 5) {
oAC.setFooter("");
}
return true;
}
doBeforeExpandContainer
is called every time the container opens (just as you would expect it to) and _nDisplayedItems
is how many items are going to be displayed in the list (also as you would expect).
So when results are retrieved, the footer is added every time. Then, before the box shows, if there are five or less results, the footer is removed.
You want the footer to only appear when there are 5 results?
Then shouldn't you change
if (oResultData[2] >= 4) {
flip = true;
}
To
if (oResultData[2] == 4) { // is this a zero based number? or should this be 5?
flip = true;
}
else { flip = false } // assuming you don't already reset this in scope
?
精彩评论