jQuery - Quicksearch

[André]

Hallo,

ich bin einfach zu blöde um eine einfache Suche in meine Seite zu bauen. Ich habe eine kleine Demo HTML Seite erstellt, die mein Problem 1zu1 nachbildet:

https://jsfiddle.net/wgh407dz/1/

Dieses Script habe ich im Einsatz: https://github.com/riklomas/quicksearch

Wenn ich in die Suche z.B. Berlin eingebe, verschwinden zwar ein paar Einträge aber der größte Teil bleibt stehen, die Frage ist nun, warm? Vielleicht kennt sich jemand von euch mit dem Script aus oder kann mir ein besseres? empfehlen?

[woodfighter]

Tach,

https://jsfiddle.net/wgh407dz/1/

Dieses Script habe ich im Einsatz: https://github.com/riklomas/quicksearch

Wenn ich in die Suche z.B. Berlin eingebe, verschwinden zwar ein paar Einträge aber der größte Teil bleibt stehen, die Frage ist nun, warm? Vielleicht kennt sich jemand von euch mit dem Script aus oder kann mir ein besseres? empfehlen?

Du übergibst Quicksearch das folgende:

$('input#id_search').quicksearch('#posts');

Der erste Parameter gibt an, in welchen Elementen gesucht werden soll; nur dein erstes Artikelelement hat die ID „posts“, also wird auch nur darin gesucht. Wenn du die article-Elemente durchsuchen willst, kann du z.B. direkt diese oder die vergebene Klasse „kategorie-uebersicht“ verwenden. Die anderen Artikel haben übrigens zwei class-Attribute, das zweite wird dann m.w. ignoriert, aber es ist trotzdem fehlerhaft.

mfg
Woodfighter

[André]

Hallo,

$('input#id_search').quicksearch('#posts');

Der erste Parameter gibt an, in welchen Elementen gesucht werden soll; nur dein erstes Artikelelement hat die ID „posts“, also wird auch nur darin gesucht. Wenn du die article-Elemente durchsuchen willst, kann du z.B. direkt diese oder die vergebene Klasse „kategorie-uebersicht“ verwenden. Die anderen Artikel haben übrigens zwei class-Attribute, das zweite wird dann m.w. ignoriert, aber es ist trotzdem fehlerhaft.

vielen lieben Dank für deine Hilfe. Ich habe es verbessert: https://jsfiddle.net/wgh407dz/6/

Jetzt habe ich noch ein Problem und zwar, gebe ich Berlin ein verschwinden zwar alle Überschriften, aber die restlichen Einträge in Kategorie 4 bleiben bestehen. Ist dieses noch irgendwie änderbar, dass nur noch Kategorie 4 - Berlin - 02 stehen bleibt?

[André]

Hallo,

ich weiß nicht, ob dieses in HTML erlaubt ist, was ich hier gemacht habe:
https://jsfiddle.net/wgh407dz/8/

Wenn jemand eine andere / bessere Idee hat, bin für alles offen.

[woodfighter]

Tach,

ich weiß nicht, ob dieses in HTML erlaubt ist, was ich hier gemacht habe:
https://jsfiddle.net/wgh407dz/8/

ja, aber sinnvoll ist das nicht unbedingt; mit Hilfe des Multiple Selectors kannst du eine passende Collection bauen, ohne übermäßig viele Klassen zu verwenden: https://jsfiddle.net/wgh407dz/9/

mfg
Woodfighter

[André]

Hallo,

ja, aber sinnvoll ist das nicht unbedingt; mit Hilfe des Multiple Selectors kannst du eine passende Collection bauen, ohne übermäßig viele Klassen zu verwenden: https://jsfiddle.net/wgh407dz/9/

vielen Dank nochmals für deine Hilfe. Funktioniert wunderbar. Ein kleiner Schönheitsfehler ist noch vorhanden, keine Ahnung ob man diesen weg bekommt. https://jsfiddle.net/wgh407dz/10/

Gebe ich in die Suche Kat ein, bleiben 4 Überschriften stehen, was nicht ganz so schön ist. Bekommt man diese vielleicht noch irgendwie weg? Ich weiß in Kategorie steckt das Wort "Kat" drin, aber dennoch ist einfach nicht schön.

[woodfighter]

Tach,

Gebe ich in die Suche Kat ein, bleiben 4 Überschriften stehen, was nicht ganz so schön ist. Bekommt man diese vielleicht noch irgendwie weg? Ich weiß in Kategorie steckt das Wort "Kat" drin, aber dennoch ist einfach nicht schön.

du könntest onAfter eine Funktion aufrufen, die den gesamten Artikel ein/ausblendet, je nachdem wie der Zustand der zugehörigen Listenelemente ist, quick & dirty:

$('.kategorie-uebersicht').each(function(index,element){
  $(element).toggle($(element).find('li').not(':hidden').length>0);
})

mfg
Woodfighter

[André]

Hallo,

du könntest onAfter eine Funktion aufrufen, die den gesamten Artikel ein/ausblendet, je nachdem wie der Zustand der zugehörigen Listenelemente ist, quick & dirty:

$('.kategorie-uebersicht').each(function(index,element){
  $(element).toggle($(element).find('li').not(':hidden').length>0);
})

vielen Dank nochmals für deine Hilfe. Hab es mir hier:
https://jsfiddle.net/wgh407dz/15/

angesehen und es funktioniert wunderbar. Eine Frage habe ich noch. Du hast die neue Funktion direkt in die Hauptfunktion von dem Script geschrieben. Muss das sein, oder könnte ich deine neue Funktion irgendwie hier mit einfügen?

$(document).ready(function(){
   $('input#id_search').quicksearch('.kategorie-uebersicht, .kategorie-uebersicht li');
});

Hat das Script mal ein Update sind alle Erweiterungen weg :/

[woodfighter]

Tach,

Du hast die neue Funktion direkt in die Hauptfunktion von dem Script geschrieben. Muss das sein, oder könnte ich deine neue Funktion irgendwie hier mit einfügen?

$(document).ready(function(){
   $('input#id_search').quicksearch('.kategorie-uebersicht, .kategorie-uebersicht li');
});

ja: https://github.com/riklomas/quicksearch#options

mfg
Woodfighter

[André]

Hallo,

ja: https://github.com/riklomas/quicksearch#options

danke.

[Gunnar Bittersmann]

@@André

ich bin einfach zu blöde um eine einfache Suche in meine Seite zu bauen.

Was du baust ist ein Filter, keine Suche. Das solltest du im UI auch so benennen.

LLAP 🖖