Encountering an issue where the boxes do not reset properly to a 2x4 layout after typing something into the input field (for example, "spore") and then deleting it. It seems to work when the boxes are placed into 4 columns, but when using float: left on #sortables, the reset does not function as expected.
Here is a working fiddle with columns: http://jsfiddle.net/SkQPZ/1
And here is a fiddle that does not work with float: left: http://jsfiddle.net/4pBFu/. I am looking to resolve this issue in the second fiddle.
Below is my jQuery code:
(function ($) {
jQuery.expr[':'].Contains = function (a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
function listFilter(gamefilter, list) {
var form = $("<form>").attr({
"class": "filterform",
"action": "#"
}),
input = $("<input>").attr({
"class": "filterinput",
"type": "text",
"placeholder": "Filter"
});
$(form).append(input).appendTo(gamefilter);
$(input).change(function () {
var list = $("#sortable");
var filter = $(this).val();
console.log(filter.length);
if (filter.length > 0) {
$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
$(".number").hide();
$(".numberstwo").hide();
} else {
console.log($(".number"));
$(".number").show();
$(".numberstwo").show();
$(list).find("a").parent().slideDown();
}
return false;
}).keyup(function () {
$(this).change();
});
}
$(function () {
listFilter($("#gamefilter"), $("#sortable"));
});
}(jQuery));