Probleme mit einem Filtersystem, welches über Checkboxen funktioniert

[brizzi]

Hallo,

ich habe seit zwei Tagen zwei kleine Probleme mit meinem Filtersystem.
Mein Filter funktioniert, wie in der Überschrift schon erwähnt dadurch, dass ich über Checkboxen meine Seite Filtern lasse. Der gesamte Inhalt wird ständig durch einen onChange geprüft. Nun habe ich die Funktion so erweitert, dass man nach den Anfangsbuchstaben Filtern kann. Es klappt zwar, nur möchte ich es so haben, wenn ich beispielsweise auf A klicke und dann auf B, sollen die Ergebnisse von A wegfallen und nur die von B da sein.

Da es ja Checkboxen sind habe mir gedacht, dass ich es ganz einfach mit:

$('#A').checked == false; oder

$('#A').removeAttr('checked');

;

Nun ja die Checkboxen werden abgewählt, jedoch ändert sich von den Anzeigen nichts, bzw, die werden einfach nur dazu addiert.

Mein Filterscript, ist der hier:

var $container;
var filters = {};

$(function() {

    $container = $('#container');



    var $filterDisplay = $('#filter-display');

    /*$container.isotope();*/

    // do stuff when checkbox change
    $('#options').on('change', function(jQEvent) {
        var $checkbox = $(jQEvent.target);
        manageCheckbox($checkbox);

        var comboFilter = getComboFilter(filters);

        $container.isotope({
            filter: comboFilter
        });

        $filterDisplay.text(comboFilter);
    });

});

function getComboFilter(filters) {
    var i = 0;
    var comboFilters = [];
    var message = [];

    for (var prop in filters) {
        message.push(filters[prop].join(' '));
        var filterGroup = filters[prop];
        // skip to next filter group if it doesn't have any values
        if (!filterGroup.length) {
            continue;
        }
        if (i === 0) {
            // copy to new array
            comboFilters = filterGroup.slice(0);
        } else {
            var filterSelectors = [];
            // copy to fresh array
            var groupCombo = comboFilters.slice(0); // [ A, B ]
            // merge filter Groups
            for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
                for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
                    filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
                }

            }
            // apply filter selectors to combo filters for next group
            comboFilters = filterSelectors;
        }
        i++;
    }

    var comboFilter = comboFilters.join(', ');
    return comboFilter;
}

function manageCheckbox($checkbox) {
    var checkbox = $checkbox[0];

    var group = $checkbox.parents('.option-set').attr('data-group');
    // create array for filter group, if not there yet
    var filterGroup = filters[group];
    if (!filterGroup) {
        filterGroup = filters[group] = [];
    }

    var isAll = $checkbox.hasClass('all');
    // reset filter group if the all box was checked
    if (isAll) {
        delete filters[group];
        if (!checkbox.checked) {
            checkbox.checked = 'checked';
        }
    }
    // index of
    var index = $.inArray(checkbox.value, filterGroup);

    if (checkbox.checked) {
        var selector = isAll ? 'input' : 'input.all';
        $checkbox.siblings(selector).removeAttr('checked');


        if (!isAll && index === -1) {
            // add filter to group
            filters[group].push(checkbox.value);
        }

    } else if (!isAll) {
        // remove filter from group
        filters[group].splice(index, 1);
        // if unchecked the last box, check the all
        if (!$checkbox.siblings('[checked]').length) {
            $checkbox.siblings('input.all').attr('checked', 'checked');
        }
    }

}

So nun zum zweiten Problem.

Als nächste Erweiterung habe ich einen Suchfeld mit einem Livesearch eingebunden.

Hier habe ich das Problem, dass das Filtersystem über die Class bestimmt wird und ich Inhalte habe die teilweise mit Leerzeichen und mit einem "&" geschrieben werden, welche dem entsprechend nicht gefunden.

hier ist das livesearch script:

$(document).ready(function() {
    // 1 - live-search darstellung
    $("#searchBox").bind("keyup", function() {
        var searchString = $(this).val();
        $(".suche").attr('value', '.' + $(this).val());

        // nur suchen, wenn minimum 1 buchstabe im eingabefeld ist
        if (searchString.length > 0) {
            $("#searchItems li").each(function(counterEntries) {
                var item = $(this).text();

                // kurzform von if-else
                (item.match(searchString)) ? $(this).show(): $(this).hide();

            });

            $("#results").show();

        } else {
            $("#results").hide();
        }
    });


    // 2 - klick auf result-item
    $("#searchItems li").bind("click", function() {

        $("#searchBox").val($(this).text());
        $("#results").hide();
        $(".suche").attr('value', '.' + $(this).text());


        // wichtig, sonst öffnet der browser den link!
        return false;
    });

});

Nun hoffe ihr könnt mir bei den zwei Problemen helfen. Denn ich weiss echt nicht mehr weiter.

Vielen Dank schon mal im Voraus.

Ciao,
Brizzi

 

[brizzi]

Hey, ich habe das zweite Problem mit dem Suchfeld gelöst. Für andere die auch eventuell mal so ein Problem habe:

.replace(/&/g,"\\&\\") ///für 1
.replace(/&/g,"\\&\\").replace(/&/g,"\\&\\") ///für 2