function SuggestController() { this.init = function () { jQuery('form[data-suggest]').each(function () { var $form = $(this), $searchBox = $form.find('.tx-meilisearch-suggest'), $formAutoComplete; if ($form.find('.tx-meilisearch-autocomplete').length > 0){ $formAutoComplete = $form.find('.tx-meilisearch-autocomplete'); } else { $formAutoComplete = $('body'); } $form.find('.tx-meilisearch-suggest-focus').focus(); jQuery.ajaxSetup({jsonp: "tx_meilisearch[callback]"}); // when no specific container found, use the form as container if ($searchBox.length === 0) { $searchBox = $form; } $searchBox.css('position', 'relative'); // Prevent submit of empty search form $form.on('submit', function (e) { if ($form.find('.tx-meilisearch-suggest').val() === '') { e.preventDefault(); $form.find('.tx-meilisearch-suggest').focus(); } }); $form.find('.tx-meilisearch-suggest').devbridgeAutocomplete({ serviceUrl: $form.data('suggest'), dataType: 'jsonp', paramName: 'tx_meilisearch[queryString]', groupBy: 'category', maxHeight: 1000, appendTo: $formAutoComplete, autoSelectFirst: false, triggerSelectOnValidInput: false, width: $searchBox.outerWidth() * 0.66, onSelect: function (suggestion) { // go to link when selecting found result if (suggestion.data.link) { // Open youtube in overlay if (suggestion.data.link.indexOf('https://www.youtube.com') === 0) { openVideoOverlay(suggestion.data.link); } else { location.href = suggestion.data.link; } // else trigger form submit (do search) } else { $form.trigger('submit'); } }, transformResult: function (response) { if (!response.suggestions) return {suggestions: []}; var firstSuggestion, result = { suggestions: $.map(response.suggestions, function (count, suggestion) { if (!firstSuggestion) firstSuggestion = suggestion; return {value: suggestion, data: {category: 'suggestion', count: count}}; }) }; $.each(response.documents, function (key, value) { var dataObject = value; var defaultGroup = $form.data('suggest-header') ? $form.data('suggest-header') : 'Top results'; dataObject.category = defaultGroup; // if a group is set we try to get a label if(dataObject.group) { dataObject.category = $form.data('suggest-header-' + dataObject.group) ? $form.data('suggest-header-' + dataObject.group) : dataObject.group; } result.suggestions.push( { value: firstSuggestion, data: dataObject } ); }); return result; }, beforeRender: function (container) { // remove first group header container.find('.autocomplete-group:first').remove(); container.addClass('tx-meilisearch-autosuggest'); // add active class to container $searchBox.parent().addClass('autocomplete-active').fadeIn(); }, formatResult: function (suggestion, currentValue) { // Do not replace anything if there current value is empty if (!currentValue) { return suggestion.value; } var pattern = '(' + $.Autocomplete.utils.escapeRegExChars(currentValue.trim()) + ')'; // normal suggestion if (suggestion.data.category === 'suggestion') { return suggestion.value .replace(new RegExp(pattern, 'gi'), '$1<\/strong>') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/<(\/?strong)>/g, '<$1>'); // results } else { var title = suggestion.data.title .replace(new RegExp(pattern, 'gi'), '$1<\/em>') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/<(\/?em)>/g, '<$1>'); return '
' + (!!suggestion.data.previewImage ? '
' : '') + '' + title + '' + '
'; } } }).on('blur', function () { $searchBox.parent().removeClass('autocomplete-active'); var $box = $(this); setTimeout(function () { $box.devbridgeAutocomplete('hide'); }, 200); }); }); }; } jQuery(document).ready(function() { /** meilisearch search autocomplete **/ var meilisearchSuggestController = new SuggestController(); meilisearchSuggestController.init(); jQuery("body").on("tx_meilisearch_updated", function() { meilisearchSuggestController.init(); }); });