Unterstützung für die autocomplete-Funktion in der Suchmaschine der Vorlagen

Unterstützung für die automatische Vervollständigung im Vorlagenfinder

In diesem Artikel erfährst du, wie du die autocomplete-Funktion in deine Vorlage implementierst. Diese Funktion zeigt dem Kunden eine Liste von Produkten, die am besten zu dem von ihm in die Suchmaschine eingegebenen Ausdruck passen.

Agat

In der Datei partials/common/header.html suchst du nach einem Satz id=”search-form”. Ändere das Element, zu dem diese ID gehört, so, dass es so aussieht:

<form method=“post” id=“search-form” class=“autocomplete-form” autocomplete=“off”>

In der Datei js/init.js suchst du nach einem Satz events:. Füge den obigen Code ein:

autocomplete: function(e){

var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;”‘<,>.?\~\\|]*/gi, '');


    if (phrase != '' && phrase.length > 1) {
        $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (result) {
            if (result.action.Result) {
                var loader = '<img class="loader-for-autocomplete" src="css/img/alo.gif" style="position:absolute; top: 50%; transform: translateY(-50%); right: 50px;">';
                $('#search-form').append(loader);
                var url = result.action.Redirect302;
                $.get(url, {__csrf:__CSRF, __collection:'products.Products|page.BaseHref|currency'}, function(res) {
                    $('.autocomplete').remove();
                    var list = res.collection['products.Products'];
                    if (list.length > 0){
                        if (list.length > 5) {
                            var size = 5;
                        } else {
                            var size = list.length;
                        }
                        var baseHref = res.collection['page.BaseHref'];
                        var currency = res.collection['currency'];
                        var autocompleteList = '<div class="autocomplete">';
                        var regPhrase = '(' + phrase.split(' ').join('|') + ')';
                        var reg = new RegExp(regPhrase, 'gi');
                        for (i = 0; i < size; i++) {
                            var nameNoQuotes = list[i].Name.replace(/"/g, '"');
                            var name = list[i].Name.replace(reg, function(str) {return '<strong>'+str+'</strong>'});
                            if(list[i].Price){
                                var price = list[i].Price.toPrice() + ' ' + currency;
                            } else {
                                var price = '';
                            }
                            if(list[i].ImageId != -1){
                                var img = '<img src="' + baseHref + 'img/' + list[i].ImageId + '/' + i + '.jpg" />'
                            } else {
                                var img = '';
                            }
                            var product = '<a href="' + list[i].Url + '" class="product">' +
                                '<div class="img">' + img + '</div>' +
                                '<div class="names">' +
                                '<div class="name" title="' + nameNoQuotes + '">' + name + '</div>' +
                                '<div class="price">' + price + '</div>' +
                                '</div>' +
                                '</a>';
                            autocompleteList += product;
                        }
                        autocompleteList += '</div>';
                        $('#search-form').append(autocompleteList);
                    }
                    $('.loader-for-autocomplete').remove();
                });
            } else if (result.action.Code != 100) {
                application.createMessage(result.action);
            }
        });
    } else {
        $('.autocomplete').remove();
        $('.loader-for-autocomplete').remove();
    }
},

Am Ende der Datei, direkt unter diesem Code:



$('body').on('blur', 'input', function () {

application.uiCheckLabels();

});
Füge diesen Code ein:



$('body').on('input', '#header-section #search-form.autocomplete-form [name="search"]', function (e) {

if(timeOutAutocomplete!=null){

clearTimeout(timeOutAutocomplete);

timeOutAutocomplete=null;

}

timeOutAutocomplete = setTimeout(function(){

self.autocomplete(e);

}, 300);

});
//variable to clearTimeout in autocomplete function

var timeOutAutocomplete = null;
$('body').on('blur', '#header-section #search-form.autocomplete-form [name="search"]', function () {

setTimeout(function () {

$('.autocomplete').remove();

$('.loader-for-autocomplete').remove();

}, 200);

});
Am Ende der Datei scss/main2.scss fügst du den Code ein:



.autocomplete{

position: absolute;

z-index: 101;

width: 100%;

@media only screen and (max-width: 1024px) {

width: calc(100% - 240px);

}

@media only screen and (max-width: 768px) {

width: calc(100% - 20px);

}

box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);

.product{

display: block;

padding: 10px;

background: $bgColor;

border: 1px solid $primaryColor;

border-bottom: none;

font-size: 16px;

color: $bgDarkerColorFont;

&:last-child{

border-bottom: 1px solid $primaryColor;

}

> div{

display: inline-block;

vertical-align: top;

margin-right: 10px;

&:last-child{

margin-right: 0;

}

}

.img{

width: 50px;

height: 50px;

position: relative;

}

img{

max-width: 100%;

max-height: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.names{

width: calc(100% - 50px - 10px);

}

.name{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.price{

margin-top: 5px;

font-size: 12px;

color: $primaryColor;

opacity: 0.63;

}

}

}
Tipp
 Beachte, dass die Dateienscss und js sollte minimiert werden. So kompiliere und minimiere Dateien scss und js erfährst du aus dem Artikel über  Kompilierung und Minimierung von Dateien.
Bernstein
In der Datei page/header.html suchst du nach einem Satz SearchForm. Ändere das Element, zu dem diese ID gehört, so, dass es so aussieht:
<form method="post" class="search autocomplete-form" autocomplete="off" id="SearchForm" action="{{ page.Url }}{{ page.QueryString | H}}" >

Am Ende der Datei js/init2.js fügst du diesen Code ein:
$('header').on('input', '#SearchForm.autocomplete-form [name="search"]', function (e) {
    if(timeOutAutocomplete!=null){
        clearTimeout(timeOutAutocomplete);
        timeOutAutocomplete=null;
    }
    timeOutAutocomplete = setTimeout(function(){

var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~\\|]*/gi, ”);

if (phrase != ” && phrase.length > 1) {

$.get(location.pathname, { __action: ‘Get/SearchAutocomplete’, search: phrase }).then(function (d) {

var a = d.action;

if (!a.Result) CreateTooltip(a);

else if (a.Redirect302){

var loader = ‘<img class=”loader-for-autocomplete” src=”css/img/alo.gif” style=”position:absolute; top: 50%; transform: translateY(-50%); right: 50px;”>’;

$(‘#SearchForm’).append(loader);

var url = a.Redirect302;

$.get(url, {__csrf:__CSRF, __collection:‘productlist.Products|page.BaseHref|currency’}, function(res) {

$(‘.autocomplete’).remove();

var list = res.collection[‘productlist.Products’];

if (list.length > 0){

if (list.length > 5) {

var size = 5;

} else {

var size = list.length;

}

var baseHref = res.collection[‘page.BaseHref’];

var currency = res.collection[‘currency’];

var autocompleteList = ‘<div class=”autocomplete”>’;

var regPhrase = ‘(‘ + phrase.split(‘ ‘).join(‘|’) + ‘)’;

var reg = new RegExp(regPhrase, ‘gi’);

for (i = 0; i < size; i++) {

var nameNoQuotes = list[i].Name.replace(/“/g, ‘”‘);

var name = list[i].Name.replace(reg, function(str) {return ‘<strong>‘+str+’</strong>‘});

if(list[i].Price){

var price = list[i].Price.toPrice() + ‘ ‘ + currency;

} else {

var price = ‘‘;

}

if(list[i].ImageId != -1){

var img = ‘<img src=“‘ + baseHref + ‘img/’ + list[i].ImageId + ‘/’ + i + ‘.jpg” />‘

} else {

var img = ‘‘;

}

var product = ‘ <a href=“‘ + list[i].Url + ‘” class=“product”>‘ +

‘<div class=“img”>‘ + img + ‘</div>‘ +

‘<div class=“names”>‘ +

‘<div class=“name” title=“‘ + nameNoQuotes + ‘”>‘ + name + ‘</div>‘ +

‘<div class=“price”>‘ + price + ‘</div>‘ +

‘</div>‘ +

‘</a>‘;

autocompleteList += product;

}

autocompleteList += ‘</div>‘;

$(‘#SearchForm’).append(autocompleteList);

}

$(‘.loader-for-autocomplete’).remove();

});

}

});

} else {

$(‘.autocomplete’).remove();

$(‘.loader-for-autocomplete’).remove();

}

}, 300);

});

//variable to clearTimeout in autocomplete function

var timeOutAutocomplete = null;

$(‘header’).on(‘blur’, ‘#SearchForm.autocomplete-form [name=”search”]’, function () {

setTimeout(function () {

$(‘.autocomplete’).remove();

$(‘.loader-for-autocomplete’).remove();

}, 200);

});

Am Ende der Datei scss/main2.scss fügst du diesen Code ein:

.autocomplete{
position: absolute;
top: 43px;
left: 0;
z-index: 101;
width: 100%;
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
.product{
display: block;
padding: 10px;
background: $bgColor;
border: 1px solid $primaryColor;
border-bottom: none;
font-size: 14px;
color: $secondaryColorFont;
transition: all ease 300ms;
&:last-child{
border-bottom: 1px solid $primaryColor;
}
> div{
display: inline-block;
vertical-align: top;
margin-right: 10px;
&:last-child{
margin-right: 0;
}
}
.img{
width: 50px;
height: 50px;
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.names{
width: calc(100% – 50px – 10px);
}
.name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price{
margin-top: 5px;
font-size: 12px;
color: $primaryColor;
opacity: 0.63;
transition: all ease 300ms;
}
&:hover{
background: $primaryColor;
color: $primaryColorFont;
.price{
color: $primaryColorFont;
opacity: 1;
}
}
}
}

Tipp

Denke daran, dass scss- und js-Dateien minimiert werden müssen. So kompiliere und minimiere Dateien scss und js erfährst du aus dem Artikel über Kompilierung und Minimierung von Dateien.

Opal

In der Datei page/header.html suchst du nach einem Satz SearchForm. Ändere das Element, zu dem diese ID gehört, so, dass es so aussieht:

<form method=“post” class=“search autocomplete-form” autocomplete=“off” id=“SearchForm” action=“{{ page.Url }}{{ page.QueryString | H}}” >

Am Ende der Datei js/init2.js diesen Code einfügen:

$(‘header’).on(‘input’, ‘#SearchForm.autocomplete-form [name=”search”]’, function (e) {

if(timeOutAutocomplete!=null){

clearTimeout(timeOutAutocomplete);

timeOutAutocomplete=null;

}

timeOutAutocomplete = setTimeout(function(){

var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;”‘<,>.?\~`\\|]*/gi, ”);

if (phrase != ” && phrase.length > 1) {

$.get(location.pathname, { __action: ‘Get/SearchAutocomplete’, search: phrase }).then(function (d) {

var a = d.action;

if (!a.Result) CreateTooltip(a);

else if (a.Redirect302){

var loader = ‘<img class=”loader-for-autocomplete” src=”css/img/alo.gif” style=”position: absolute; transform: translate(-80px, 18px);”>’;

$(‘#SearchForm’).append(loader);

var url = a.Redirect302;

$.get(url, {__csrf:__CSRF, __collection:‘productlist.Products|page.BaseHref|currency|config.Products.ShowCode’}, function(res) {

$(‘.autocomplete’).remove();

var list = res.collection[‘productlist.Products’];

var showCode = res.collection[‘config.Products.ShowCode’];

if (list.length > 0){

if (list.length > 5) {

var size = 5;

} else {

var size = list.length;

}

var baseHref = res.collection[‘page.BaseHref’];

var currency = res.collection[‘currency’];

var input = $(‘#SearchForm’).find(‘[name=search]’);

var width = input.width();

var top = input.offset().top + input.height() – 16;

var autocompleteList = ‘<div class=”autocomplete” style=”top:’+top+‘px; width:’+width+‘px”>’;

var regPhrase = ‘(‘ + phrase.split(‘ ‘).join(‘|’) + ‘)’;

var reg = new RegExp(regPhrase, ‘gi’);

for (i = 0; i < size; i++) {

var nameNoQuotes = list[i].Name.replace(/“/g, ‘”‘);

var name = list[i].Name.replace(reg, function(str) {return ‘<strong>‘+str+’</strong>‘});

if(showCode){

var code = list[i].Code.replace(reg, function(str) {return ‘<strong>‘+str+’</strong>‘});

} else {

var code = ‘‘;

}

if(list[i].Price){

var price = list[i].Price.toPrice() + ‘ ‘ + currency;

} else {

var price = ‘‘;

}

if(list[i].ImageId != -1){

var img = ‘<img src=“‘ + baseHref + ‘img/’ + list[i].ImageId + ‘/’ + i + ‘.jpg” />‘

} else {

var img = ‘‘;

}

var product = ‘ <a href=“‘ + list[i].Url + ‘” class=“product”>‘ +

‘<div class=“img”>‘ + img + ‘</div>‘ +

‘<div class=“names”>‘ +

‘<div class=“name” title=“‘+nameNoQuotes+'”>‘ + name + ‘</div>‘ +

‘<div class=“code”>‘ + code + ‘</div>‘ +

‘</div>‘ +

‘<div>‘ + price + ‘</div>‘ +

‘</a>‘;

autocompleteList += product;

}

autocompleteList += ‘</div>‘;

$(‘#SearchForm’).parent().append(autocompleteList);

}

$(‘.loader-for-autocomplete’).remove();

});

}

});

} else {

$(‘.autocomplete’).remove();

$(‘.loader-for-autocomplete’).remove();

}

}, 300);

});

//variable to clearTimeout in autocomplete function

var timeOutAutocomplete = null;

$(‘header’).on(‘blur’, ‘#SearchForm.autocomplete-form [name=”search”]’, function () {

setTimeout(function () {

$(‘.autocomplete’).remove();

$(‘.loader-for-autocomplete’).remove();

}, 200);

});

Am Ende der Datei scss/main2.scss fügst du diesen Code ein:

.autocomplete{
position: absolute;
left: calc(50% – 20px);
transform: translateX(-50%);
z-index: 1000;
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
.product{
display: block;
padding: 10px;
background: $bgColor;
border: 1px solid $primaryColor;
border-bottom: none;
font-size: 16px;
color: $secondaryColorFont;
transition: all 300ms ease;
&:last-child{
border-bottom: 1px solid $primaryColor;
}
> div{
display: inline-block;
vertical-align: top;
margin-right: 10px;
&:last-child{
width: 100px;
margin-right: 0;
text-align: right;
}
}
.img{
width: 50px;
height: 50px;
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.names{
width: calc(100% – 50px – 100px – 20px);
}
.name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.code{
font-size: 12px;
opacity: 0.63;
}
&:hover{
background: $primaryColor;
color: $primaryColorFont;
}
}
}

Tipp

Beachte, dass die Dateien scss und js sollte minimiert werden. So kompiliere und minimiere Dateienscss und js erfährst du aus dem Artikel über Kompilierung und Minimierung von Dateien.

Wie können wir dir helfen?

Unterstützung für die automatische Vervollständigung im Vorlagenfinder

Agat

Bernstein

Opal

Finden Sie den Artikel hilfreich?

Hast du weitere Fragen? Nimm Kontakt mit uns auf!