große Listen live perJS/JQuery filtern

[Stefan]

Hallo zusammen,

ich möchte meinen WebShop um einen Livefilter in den Kategorien erweitern.
Eine Kategorie hat von 2- 1000 Artikel, die allesamt in einer Liste angezeigt werden.
Nun möchte ich diese Liste auf Bezeichnung filtern und später auch noch einen Preisfilter einbauen.
Aber irgendwie bin ich auf dem Holzweg. Meine Lösung funktioniert für den Filter ebreits, bei mehr als 300 Artikeln stirbt aber der Browser komplett ab.

Hat mir hier evtl jemand einen Tipp/Trick wie ich das Ganze besser lösen kann?

Danke im Voraus.
Hier mein jetziger JS Code:

  
  
(function ($) {  
  jQuery.expr[':'].Contains = function(a,i,m){  
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;  
  };  
  
  
  function listFilter(header, list) {  
    var form = $("<form>").attr({"class":"filterform","action":"#"}),  
        input = $("<input>").attr({"class":"filterinput","type":"text"});  
  
    $(form).append(input);  
	$(form).appendTo(header);  
	  
    $(input).change( function () {  
        var filter = $(this).val();  
		<?php  
			/*  
			 * TODO mehrere Filter + Preis per Slider  
			 *  
			 */  
			?>  
        if(filter.length > 3) {  
			$(list).find("li").hide();  
			$(list).find("div.suchfilter:Contains(" + filter + ")").parent().slideDown();  
        } else {  
          $(list).find("li").slideDown();  
        }  
        return false;  
      }).keyup( function () {  
        $(this).change();  
    });  
  }  
  
  
  $(function () {  
  
    listFilter($("#artikelliste_filter"), $("#artikelliste"));  
  });  
}(jQuery));  

[suit]

Hat mir hier evtl jemand einen Tipp/Trick wie ich das Ganze besser lösen kann?

http://jqueryui.com/demos/autocomplete/

Als Datenquelle kansnt du dann JSON oder XML verwenden - ich hab' das in mehreren Shops im Einsatz, der größte hat rund 15.000 Artikel und trotzdem geht die Sache sehr performant von statten.

Die Datenquelle ist in dem Fall ein XML welches per Ajax abgeholt wird, sobald mindestens 2 Zeichen im Eingabefeld stehen.

[peterS.]

gruss Stefan,

Eine Kategorie hat von 2- 1000 Artikel, die allesamt in einer Liste angezeigt werden.
Nun möchte ich diese Liste auf Bezeichnung filtern ...
... bei mehr als 300 Artikeln stirbt aber der Browser komplett ab.

ein grobes schema koennte folgendermassen aussehen.

1. ideal waere es, ueber native DOM-methoden einmalig die referenz auf
      die entsprechende knotenliste (LiveNodeList) holen zu koennen.

z.b.:

var liveNodeList = document  
  .getElementById("listIndentifier")  
  .getElementsByTagName("li")  
;

2. durch die liste iterieren und jeden knoten, der dem filterkriterium/
      den filterkriterien entspricht, aus dem DOM-Baum entfernen und in
      einem array parken.

3. nochmals durch die jetzt hoffentlich reduzierte knotenliste iterieren
      und alle zurueckgebliebenen knoten durch geeignete massnahmen visuell
      ausblenden.

4. das array mit den geparkten knoten mit entsprechender sortierfunktion
      auf-/absteigend nach preis sortieren.

5. sortiertes array entleeren, dabei die visuelle sichtbarkeit der knoten
      gewaehrleisten/wiederherstellen und diese in der jetzt richtigen
      reihenfolge wieder in das DOM haengen.

ideale voraussetzung fuer diesen ansatz ist natuerlich ein sauber
strukturiertes HTML. der gesamte prozess duerfte fast ausschliesslich
mit JavaScript 1.5 und nativen DOM-Methoden zu bewaeltigen sein.

und ja ich mag jQuery; aus performance-gruenden bevorzuge ich bei solchen
aktionen aber den direkten weg - beispielsweise so:

<ul id="searchResults">  
  <li data-refinements="filter0 filter1 filter2">...</li>  
  <li data-refinements="filter0 filter4 filter7">...</li>  
  <li data-refinements="filter2 filter4 filter9">...</li>  
</ul>

  
var  
  elmResultList = document.getElementById("searchResults"),  
  liveResultList = elmResultList.getElementsByTagName("li")  
;  
  
  
var elm, arr = [], idx = liveResultList.length;  
while (idx) {  
  
  elm = liveResultList[--idx];  
  
// Deine Filterfunktion - Deine aktuell gueltigen Filterkriterien.  
  if (hasRefinements(jQuery(elm).data("refinements"), currentRefinements)) {  
  
    arr.push(elmResultList.removeChild(elm));  
  }  
}  
  
idx = liveResultList.length;  
while (idx) {  
  
  elm = liveResultList[--idx];  
// [elm] ausblenden.  
}  
  
arr.sort(function (a, b) {  
  
// Dein Sortierkriterium.  
  return 0; // 1, -1  
});  
  
while (elm = arr.unshift()) {  
  
  elmResultList.appendChild(elm);  
}

so long - peterS. - [e-mail]

[Stefan]

Hallo Peter,

Danke erstmal für deine ausführliche Antwort!!! Ich habe meinen Filter schon enorm beschleunigt und werde evtl deine Version auch noch testen ;-)

P.S. du hast mail ;-)

Gruß Stefan