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:
Na końcu pliku js/init-ui2.js wklej ten kod:
| <class=”lang:ruby decode:true”>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 = ’  ’;$(’.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 = ’ |
|
’; 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 ’’+str+’’}); if(showCode){ var code = list[i].Code.replace(reg, function(str) {return ’’+str+’’}); } 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 + ’
’ + ’ ’ + ’ ’ + name + ’
’ + ’ ’ + code + ’
’ + ’ ’ + ’ ’ + price + ’
’ + ”; autocompleteList += product; } autocompleteList += ’ ’; $(’.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;
}
}
}
}
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:
W pliku js/init.js wyszukaj frazę events:. Linijkę wyżej wklej kod:
| <class=”lang:ruby decode:true „>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 = ’ ’;$(’#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 = ’ |
|
’; 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 ’’+str+’’}); if(list[i].Price){ var price = list[i].Price.toPrice() + ’ ’ + currency; } else { var price = ”; } if(list[i].ImageId != -1){ var img = ’ ’ + img + ’
’ + ’ ’ + ’ ’ + name + ’
’ + ’ ’ + price + ’
’ + ’ ’ + ”; autocompleteList += product; } autocompleteList += ’ ’; $(’#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();
});
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); }); |
Na końcu pliku scss/main2.scss wklej kod: W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak: Na końcu pliku js/init2.js wklej ten kod: ’; 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 ’’+str+’’}); if(list[i].Price){ var price = list[i].Price.toPrice() + ’ ’ + currency; } else { var price = ”; } if(list[i].ImageId != -1){ var img = ’ ’ + ’ ’ + ’ ’ + ’ ’ + ’ ’ + ”; autocompleteList += product; } autocompleteList += ’ ’; $(’#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: W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak: Na końcu pliku js/init2.js wklej ten kod: ’; 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 ’’+str+’’}); if(showCode){ var code = list[i].Code.replace(reg, function(str) {return ’’+str+’’}); } else { var code = ”; } if(list[i].Price){ var price = list[i].Price.toPrice() + ’ ’ + currency; } else { var price = ”; } if(list[i].ImageId != -1){ var img = ’ ’ + ’ ’ + ’ ’ + ’ ’ + ’ ’ + ’ ’ + ”; autocompleteList += product; } autocompleteList += ’ ’; $(’#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;
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;
}
}
}
Bursztyn
<class=”lang:ruby decode:true „>$(’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 = ’’;
$(’#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 = ’
’ } else { var img = ”; } var product = ’ ’ + ’
<class=”lang:ruby decode:true „>.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;
}
}
}
}Opal
<class=”lang:ruby decode:true „>$(’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 = ’’;
$(’#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 = ’
’ } else { var img = ”; } var product = ’ ’ + ’
<class=”lang:ruby decode:true „>.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;
}
}
}