In order to output the SearchApiAutoCompleteFormBlock (view) within a modal, we lost the bound JavaScript events on the input. In other words, the DOM element (<div>
) for the block was recreated by JavaScript after Drupal adds the events.
Now we need to rebind the events for the autocomplete.
This is the behavior of the Search API autocomplete module.
Drupal.behaviors.searchApiAutocomplete = {
attach: function (context, settings) {
// Find all our fields with autocomplete settings.
$(context)
.find('.ui-autocomplete-input[data-search-api-autocomplete-search]')
.once('search-api-autocomplete')
.each(function () {
var uiAutocomplete = $(this).data('ui-autocomplete');
if (!uiAutocomplete) {
return;
}
var $element = uiAutocomplete.menu.element;
$element.addClass('search-api-autocomplete-search');
var elementSettings = autocomplete.getSettings(this, settings);
if (elementSettings['delay']) {
uiAutocomplete.options['delay'] = elementSettings['delay'];
}
if (elementSettings['min_length']) {
uiAutocomplete.options['minLength'] = elementSettings['min_length'];
}
// Override the "select" callback of the jQuery UI autocomplete.
var oldSelect = uiAutocomplete.options.select;
uiAutocomplete.options.select = function (event, ui) {
// If this is a URL suggestion, instead of autocompleting we
// redirect the user to that URL.
if (ui.item.url) {
location.href = ui.item.url;
return false;
}
var ret = oldSelect.apply(this, arguments);
// If auto-submit is enabled, submit the form.
if (elementSettings['auto_submit'] && elementSettings['selector']) {
$(elementSettings['selector'], this.form).trigger('click');
}
return ret;
};
});
}
I would expect there is some kind of mechanism to re-register view block contexts.
I have no idea if this can be done easily. Any help is appreciated.