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

    Setting Up a NuGet Feed for Acumatica Libraries

    Introduction Seasoned developers are probably aware of the benefits of using a package manager tool for installation and updates of packaged reference files and libraries.  Such packages contain reusable code that are published to a central repository for consuming by other programs.  The advantages to using such a tool is to maintain any common code in a common location, rather than needing to copy the individual files around and maintain… …

    Read more >