Optimiere die Suche auf deiner Website mit diesem einfachen Script

WordPress und Woocommerce Snippets für Deine Seite (Teil 2) -Skripte -Boost my Shop

In der Welt des Webcontents ist eine effektive Suche unerlässlich, um den Benutzern zu helfen, genau das zu finden, wonach sie suchen. Ob es darum geht, Inhalte basierend auf bestimmten Kriterien zu filtern oder eine Volltextsuche anzubieten, ein gut durchdachtes Such-Script kann den Unterschied machen. Hier ist ein einfaches Script, das dir hilft, die Suche auf deiner Website zu optimieren:

<div class="checkboxes">


<input id="#versichern" data-search-term="versichern" type="checkbox">
<label class="inline-checkbox" for="#versichern">versichern</label>

<input id="#investieren" data-search-term="investieren" type="checkbox">
<label class="inline-checkbox" for="#investieren">investieren</label>

<input id="#finanzieren" data-search-term="finanzieren" type="checkbox">
<label class="inline-checkbox" for="#finanzieren">finanzieren</label>

<input id="post-filter" type="text" placeholder="Suche nach PLZ, Ort oder Namen.">
	
</div>
 
jQuery("#post-filter").keyup(function() {

      // Retrieve the input field text and reset the count to zero
      var filter = jQuery(this).val(),
        count = 0;

      // Loop through the repeater divs
      jQuery('.berater-box').each(function() {


        // If the list item does not contain the text phrase fade it out
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
          jQuery(this).hide('.berater-box');  // MY CHANGE

          // Show the list item if the phrase matches and increase the count by 1
        } else {
          jQuery(this).show(); 
          count++;
        }

      });

    });


jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo( function (arg) {
	return function (elem) {
		return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
	};
});



jQuery('.fast-filter input[type="checkbox"]').change( function() {
	
	var thisID = jQuery(this).attr('id');
	
	jQuery('.fast-filter input[type="checkbox"]').each( function() {
		if( jQuery(this).attr('id') != thisID) {
			jQuery(this).prop('checked', false);
		}
	})
	
	if( jQuery(this).is(':checked') ) {
		var curr_text = jQuery(this).data('search-term');
		filterResults(curr_text);
	} else {
		filterResults('');
	}
	
	
})

function filterResults(curr_text) {
	jQuery('.card').hide();
	jQuery('.card:CIcontains("' + curr_text + '")').show();
}
 

Dieses Script ermöglicht es Benutzern, Inhalte basierend auf bestimmten Kriterien zu filtern oder eine Volltextsuche durchzuführen. Durch die Verwendung von Checkboxen oder einem Texteingabefeld können Benutzer die Suche präzisieren und so schnell und effizient das finden, was sie benötigen. Egal ob es darum geht, nach Produkten zu suchen, nach bestimmten Inhalten zu filtern oder Inhalte zu durchsuchen - dieses Script bietet eine flexible Lösung für deine Website.

 

Disclaimer

Das vorliegende Code-Snippet wurde nach bestem Wissen und Gewissen getestet. Ich stelle es zur freien Verwendung zur Verfügung. Es ist jedoch wichtig zu betonen, dass ich keine Garantie für die einwandfreie Funktionalität dieses Codes in allen denkbaren WordPress-Umgebungen übernehmen kann.

Die Nutzung und der Download dieses Code-Snippets erfolgen auf eigene Gefahr und Verantwortung. Es liegt in der Verantwortung des Nutzers sicherzustellen, dass der Code ordnungsgemäß in seine WordPress-Installation integriert wird und keine negativen Auswirkungen auf seine Website hat.

crossmenu