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:
