Obsługa funkcji autocomplete w wyszukiwarce szablonu

W tym artykule dowiesz się jak zaimplementować funkcję autocomplete w swoim szablonie. Funkcja ta wyświetli klientowi listę towarów, które będą najlepiej pasowały do wpisanej przez niego frazy w wyszukiwarce.

Szafir

W pliku common/header/header.html wyszukaj frazę quick-search-form-lq. Zmodyfikuj element, do którego należy ta klasa, aby wyglądał tak:


<form method="post" class="input-field-search-ui {{ noSearchOnMobile }} quick-search-form-lq autocomplete-form-lq" autocomplete="off">

Na końcu pliku js/init-ui2.js wklej ten kod:


function autocomplete(e) {
    var phrase = $(e.currentTarget).val().replace(/[!@#$%^&*()+={}\[\]:;"'<,>.?\~`\\|]*/gi, '');
    if (phrase != '' && phrase.length > 1) {
        $.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (res) {
            if($(window).width() > 1280){
                var right = 'right: 50px';
            } else if($(window).width() > 680){
                var right = '';
            } else {
                var right = 'right: 61px';
            }
            var loader = '<img class="loader-for-autocomplete-lq" src="css/img/alo.gif" style="position:absolute; top: 50%; transform: translateY(-50%); '+right+'">';
            $('.quick-search-form-lq.autocomplete-form-lq').append(loader);
            var url = res.action.Redirect302;
            $.get(url, {__csrf:__CSRF, __collection:'products.Products|page.BaseHref|currency|config.Products.ShowCode'}, function(res) {
                $('.autocomplete-lq').remove();
                var list = res.collection['products.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 autocompleteList = '<div class="autocomplete-ui autocomplete-lq">';
                    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-ui">' +
                                            '<div class="img-ui">' + img + '</div>' +
                                            '<div class="names-ui">' +
                                                '<div class="name-ui" title="' + nameNoQuotes + '">' + name + '</div>' +
                                                '<div class="code-ui">' + code + '</div>' +
                                            '</div>' +
                                            '<div>' + price + '</div>' +
                                        '</a>';
                        autocompleteList += product;
                    }
                    autocompleteList += '</div>';
                    $('.quick-search-form-lq.autocomplete-form-lq').append(autocompleteList);
                }
                $('.loader-for-autocomplete-lq').remove();
            });
        });
    } else {
        $('.autocomplete-lq').remove();
        $('.loader-for-autocomplete-lq').remove();
    }
};

$('body').on('input', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function (e) {
    if(timeOutAutocomplete!=null){
        clearTimeout(timeOutAutocomplete);
        timeOutAutocomplete=null;
    }
    timeOutAutocomplete = setTimeout(function(){
       autocomplete(e);
    }, 300);
});

//variable to clearTimeout in autocomplete function
var timeOutAutocomplete = null;

$('body').on('blur', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function () {
    setTimeout(function () {
        $('.autocomplete-lq').remove();
        $('.loader-for-autocomplete-lq').remove();
    },200);
});

function autocomplete(e) {

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

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

$.get(location.pathname, { __action: 'Get/SearchAutocomplete', search: phrase }).then(function (res) {

if($(window).width() > 1280){

var right = 'right: 50px';

} else if($(window).width() > 680){

var right = '';

} else {

var right = 'right: 61px';

}

var loader = '<img class="loader-for-autocomplete-lq" src="css/img/alo.gif" style="position:absolute; top: 50%; transform: translateY(-50%); '+right+'">';

$('.quick-search-form-lq.autocomplete-form-lq').append(loader);

var url = res.action.Redirect302;

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

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

var list = res.collection['products.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 autocompleteList = '<div class="autocomplete-ui autocomplete-lq">';

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-ui">' +

'<div class="img-ui">' + img + '</div>' +

'<div class="names-ui">' +

'<div class="name-ui" title="' + nameNoQuotes + '">' + name + '</div>' +

'<div class="code-ui">' + code + '</div>' +

'</div>' +

'<div>' + price + '</div>' +

'</a>';

autocompleteList += product;

}

autocompleteList += '</div>';

$('.quick-search-form-lq.autocomplete-form-lq').append(autocompleteList);

}

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

});

} else {

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

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

}

};

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

if(timeOutAutocomplete!=null){

clearTimeout(timeOutAutocomplete);

timeOutAutocomplete=null;

}

timeOutAutocomplete = setTimeout(function(){

autocomplete(e);

}, 300);

});

//variable to clearTimeout in autocomplete function

var timeOutAutocomplete = null;

$('body').on('blur', '.quick-search-form-lq.autocomplete-form-lq [name="search"]', function () {

setTimeout(function () {

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

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

},200);

});

Na końcu pliku scss/globals/_header.scss wklej ten kod:


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

.autocomplete-ui{

position: absolute;

z-index: 1000;

width: 100%;

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

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

max-width: 550px;

left: 50%;

transform: translateX(calc(-50% - 25px));

text-align: left;

}

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

left: auto;

transform: none;

}

.product-ui{

display: block;

padding: 10px;

background: $bgColor;

border: 1px solid $lightBorderColor;

border-bottom: none;

font-size: 16px;

color: $primaryColorFont;

transition: all ease 300ms;

&:last-child{

border-bottom: 1px solid $lightBorderColor;

}

> div{

display: inline-block;

vertical-align: top;

margin-right: 10px;

&:last-child{

width: 100px;

margin-right: 0;

text-align: right;

}

.img-ui{

width: 50px;

height: 50px;

position: relative;

}

img{

max-width: 100%;

max-height: 100%;

position: absolute;

top: 50%;

left: 50%;

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

}

.names-ui{

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

}

.name-ui{

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

color: $primaryColor;

transition: all ease 300ms;

}

.code-ui{

font-size: 12px;

color: $bgColorFont;

transition: all ease 300ms;

}

&:hover{

background: $btnSolidHoverBgColor;

color: $btnSolidHoverTextColor;

.name-ui, .code-ui{

color: $btnSolidHoverTextColor;

}

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku partials/common/header.html wyszukaj frazę id=”search-form”. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:


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

W pliku js/init.js wyszukaj frazę events:. Linijkę wyżej wklej kod:


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();
    }
},

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();

}

Natomiast pod koniec pliku tuż pod takim kodem:


$('body').on('blur', 'input', function () {
    application.uiCheckLabels();
});

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

application.uiCheckLabels();

});

Wklej taki kod:


$('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);
});

$('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);

});

Na końcu pliku scss/main2.scss wklej kod:


.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;
    }
  }
}

.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;

}

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn

W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:


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

Na końcu pliku js/init2.js wklej ten kod:


$('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);
});

$('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);

});

Na końcu pliku scss/main2.scss wklej ten kod:


.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;
      }
    }
  }
}

.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;

}

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal

W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:


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

Na końcu pliku js/init2.js wklej ten kod:


$('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);
});

$('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);

});

Na końcu pliku scss/main2.scss wklej ten kod:


.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;
    }
  }
}

.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;

}

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Obsługa funkcji autocomplete w wyszukiwarce szablonu