(function( $ )
{
'use strict';
var srcSearchAutocomplete2 =
{
element: null,
init : function( options )
{
options = options[0]
? $.extend( {}, $.fn.srcSearchAutocomplete2.defaults, options[0] )
: $.extend( {}, $.fn.srcSearchAutocomplete2.defaults );
// Make element
var $elem = $( options.template_element );
$elem.find('form').attr( 'action', options.search_form_url );
$elem.find('.sr-no-search-results-container').html( options.no_results_text );
$elem.find('form input[type=text]').prop('placeholder', options.search_placeholder_text);
$elem.prependTo( $('body') );
// Attach element to search opener
this.element.data('src-search-autocomplete-2-element', $elem);
// Search event
$elem.find('form input[type=text]').on('keyup', function(e)
{
var $elem = $(this).closest('.src-search-autocomplete-2');
var options = $elem.data('options');
// Clear previous timeout
if(options.search_timeout_var) {
clearTimeout( options.search_timeout_var );
}
// Start new timeout
options.search_timeout_var = setTimeout(
function($elem) {
srcSearchAutocomplete2.search.call($elem);
},
options.search_timeout,
$elem
);
$elem.data('options', options);
});
// Stop propagation for main element
$elem.on('click', function(e) {
e.stopPropagation();
});
// Search opener click event
this.element.on('click', function(e)
{
e.preventDefault();
e.stopPropagation();
srcSearchAutocomplete2.open.call( $(this).data('src-search-autocomplete-2-element') );
});
// Search panel close click
$elem.find('.close-btn').on('click', function(e) {
srcSearchAutocomplete2.close.call( $(this).closest('.src-search-autocomplete-2') );
});
// Body click (close search)
$('body').on('click', function(e) {
srcSearchAutocomplete2.close.call( $('.src-search-autocomplete-2') );
});
// Escape button press (close search)
$(document).on('keyup', function(e) {
if(e.key === "Escape") { // escape key maps to keycode `27`
srcSearchAutocomplete2.close.call( $('.src-search-autocomplete-2') );
}
});
$elem.data('options', options);
},
// this = element
search: function()
{
var $elem = this;
var options = $elem.data('options');
// Trim query
var $input = $elem.find('input[type=text]');
var query = $input.val().trim();
$input.val( query );
// Validate query length
var minQueryLength = options.min_query_length;
if(query.length < minQueryLength) {
console.log('Query too short');
return;
}
// Change button icon to spinner
var $button = $elem.find('.sr-search-btn');
if($button.data('original-content') == undefined) {
$button.data('original-content', $button.html());
}
$button.html('');
// Search
jQuery.ajax({
'url': options.search_url,
'method': 'GET',
'data': $elem.find('form').serializeArray(),
'caller': $elem,
'success': function(data)
{
var $button = this.caller.find('.sr-search-btn');
$button.html( $button.data('original-content') );
srcSearchAutocomplete2.render.call(this.caller, data);
}
});
},
render: function(items)
{
var $elem = this;
var $searchResultsContainer = $elem.find('.sr-search-results-container');
var $viewMoreLink = $elem.find('.sr-view-more-link');
var $noResultsContainer = $elem.find('.sr-no-search-results-container');
var options = $elem.data('options');
// Render new results
$elem.find('.sr-search-results').empty();
var nrOfProductsRendered = 0;
for(var i=0; i= options.max_search_results) {
continue;
}
// Make product
var $product = $(options.template_product);
$product.find('a').prop('href', item.url);
$product.find('.sr-product-image').prop('src', item.small_image_url);
$product.find('.sr-product-title').text(item.title);
$product.find('.sr-product-stock').html(item.availability);
if (item.special_price) {
$product.find('.sr-product-price').remove();
$product.find('.sr-product-special-price').html(item.special_price);
$product.find('.sr-product-default-price').html(item.regular_price);
} else {
$product.find('.sr-product-price').html(item.price);
$product.find('.sr-product-special-price').remove();
$product.find('.sr-product-default-price').remove();
}
// Render product
$elem.find('.sr-search-results').append($product);
nrOfProductsRendered += 1;
}
else if(item.type == 'more_link' && nrOfProductsRendered > 0)
{
// Render view more link
$viewMoreLink.prop('href', item.url);
$viewMoreLink.text( item.title );
$viewMoreLink.removeClass('d-none');
}
}
// Items found
if(nrOfProductsRendered > 0)
{
$noResultsContainer.hide();
$searchResultsContainer.slideDown();
}
// Found nothing
else
{
$searchResultsContainer.hide();
$noResultsContainer.show();
}
},
open: function()
{
$(this).show(function() {
$(this).find('input[type=text]').focus();
});
},
close: function( )
{
$(this).hide(800, function()
{
var $elem = $(this);
$elem.find('.sr-search-results-container').hide();
$elem.find('.sr-no-search-results-container').hide();
$elem.find('form input[type=text]').val('');
});
}
};
$.fn.srcSearchAutocomplete2 = function( method )
{
srcSearchAutocomplete2.element = this;
// Call method
if ( srcSearchAutocomplete2[method] )
{
return srcSearchAutocomplete2[ method ]( Array.prototype.slice.call( arguments, 1 ));
}
// Init
else if ( typeof method === 'object' || ! method )
{
return srcSearchAutocomplete2.init( arguments );
}
// Error
else
{
$.error( 'Method ' + method + ' does not exist on jQuery.srcSearchAutocomplete2' );
}
};
$.fn.srcSearchAutocomplete2.defaults = {
'min_query_length': 2,
'max_search_results': 6,
'search_placeholder_text': 'Search...',
'no_results_text': 'No results found :(',
'more_link_text': 'View more',
'search_form_url': null,
'search_url': null,
'search_timeout': 1000,
'search_timeout_var': null,
'search_element': null,
'template_element': '' +
'' +
'
' +
'
' +
'
' +
'
Found nothing :(
' +
'
',
'template_product': '' +
''
};
})( jQuery );