jQuery-Entwicklung: Evaluierung einer Search-Funktion auf Basis von jQuery UI Autocomplete

Inhaltsverzeichnis

jQuery-Entwicklung: Evaluierung einer Search-Funktion auf Basis von jQuery UI Autocomplete

Ein Partner der mwbsc GmbH ist Hersteller eines B2B-Shopsystems. In einem Einführungsprojekt wurden besondere Anforderungen an die Suche innerhalb des Shops gestellt. Aufgabenstellung war die Evaluierung von Such-Funktionen bzw. deren Darstellung. Eine Demo ist nachfolgend zu sehen:

<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery UI Autocomplete - Categories</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="/resources/demos/style.css">
 <style>  .ui-autocomplete-category {
 font-weight: bold;
 padding: .2em .4em;
 margin: .8em 0 .2em;
 line-height: 1.5;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
 $( function() {
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
 _create: function() {
 this._super();
 this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
 },  _resizeMenu: function () {
 this.menu.element.hide();
 },
 _renderMenu: function( ul, items ) {
 var that = this,
 currentCategory = ""; $('#searchresults-Items').html("<b>Artikel</b><ul>"); $('#searchresults-Products').html("<b>Produkte</b><ul>"); $('#searchresults-People').html("<b>Menschen</b><ul>");
 $.each( items, function( index, item ) {
 $('#searchresults-'+item.category).append("<li>"+item.label+"</li>");
 }); $('#searchresults-Items').append("</ul>"); $('#searchresults-Products').append("</ul>"); $('#searchresults-People').append("</ul>");
 }    });
 var data = [
 { label: "Wanne", category: "Items" },
 { label: "Wolle", category: "Items" },
 { label: "Webstuhl", category: "Items" },
 { label: "Web-Maschinen", category: "Products" },
 { label: "Web-Material", category: "Products" },
 { label: "Web-Magazine", category: "Products" },
 { label: "Matthias Weber", category: "People" },
 { label: "Martin Werber", category: "People" },
 { label: "Sebastian Weber", category: "People" }
 ];
 $( "#search" ).catcomplete({
 delay: 0,
 source: data
 });
 } );
 </script>
 </head>
 <body>
 <label for="search">Search: </label><input id="search">
 <div id="searchresults">
 <div id="searchresults-Items" style="float:left;width: 30%;padding: 20px;background: #eee;box-sizing: border-box;"></div>
 <div id="searchresults-Products" style="float:left;width: 30%;padding: 20px;background: #eee;box-sizing: border-box;"></div>
 <div id="searchresults-People" style="float:left;width: 30%;padding: 20px;background: #eee;box-sizing: border-box;"></div>
 </div>
 </body>
 </html>

 

Review zum Projekt:

 

Diese Demo hat noch keinen Datenbankbezug. Jedoch zeigt es schön, dass mit jQuery eine entsprechende Darstellung möglich ist. In der nächsten Phase des Projektes gilt es die statischen Daten durch einen entsprechenden Datenzugriff auszutauschen und die Performance der Suche akzeptabel zu halten. Hier sind schon mehrere Ideen in der Versuchsphase.

Falls als auch Sie ein großes Web-Projekt (ASP.net) anstehend haben und noch Entwicklungsunterstützung benötigen, so kommen Sie gerne auf uns zu:

    weitere insights

    Warum Low-Code-Projekte scheitern – und wie sie gelingen

    38 Prozent der Unternehmen entscheiden sich heute für Low-Code-Plattformen, um schnell IT-Lösungen bereitstellen zu können. Citizen Developer sollen dabei IT-Fachkräfte ersetzen und ohne Programmierkenntnisse selbstständig Anwendungen entwickeln. Warum über die Hälfte dieser Low-Code-Projekte jedoch scheitern und was eine mögliche Alternative zum Citizen Development sein könnte, wissen die Experten von WEBCON. Warum Low-Code-Projekte scheitern – und wie […] …

    weiterlesen >>

    NTT: So kommen IT-Teams bei der Cloud-Migration nicht ins Schwitzen

    Eines haben alle Cloud-Projekte gemeinsam: Ohne eine gute Planung und ein erfahrenes Projektmanagement-Team stehen Unternehmen auf verlorenem Posten. NTT Ltd., ein führendes IT-Infrastruktur- und Dienstleistungsunternehmen, zeigt, wie sich die Cloud-Migration so gestalten lässt, dass der Betrieb von Anfang an reibungslos läuft. NTT: So kommen IT-Teams bei der Cloud-Migration nicht ins Schwitzen Ein Unternehmen, das agil […] …

    weiterlesen >>