autocompleteSearchListeners()

Usage

This function runs automatically, so it is not called manually. Is this incorrect?

Examples

Prevent default Nebula autocomplete on a search field. This is also useful for overriding the default Nebula autocomplete in favor of customized parameters.

HTML

<input id="s" class="no-autocomplete" type="text" placeholder="Search this website..." />

Additional Notes

This function runs on all input fields with an ID of s or a class of search.

To prevent an autocomplete on a certain input, use the class no-autocomplete.

Source File

Located in /assets/js/modules/search.js on line 109.

1 Hook

Find these filters and actions in the source code below to hook into them. Use wp.hooks.doAction() and wp.hooks.addFilter() in your JavaScript file.

Filters

"nebulaAutocompleteSearchSelector"
Need a new filter hook? Request one here.

Actions

This function has no action hooks available. Request one?

JavaScript

nebula.autocompleteSearchListeners = async function(){
    let autocompleteSearchSelector = wp.hooks.applyFilters('nebulaAutocompleteSearchSelector', '.nebula-search input, input#s, input.search, input[name="s"]');
    jQuery(autocompleteSearchSelector).one('focus', function(){ //Only do this once
        if ( !jQuery(this).hasClass('no-autocomplete') ){ //Use this class to disable or override the default Nebula autocomplete search parameters
            nebula.loadJS(nebula.site.resources.scripts.nebula_jquery_ui, 'jquery-ui').then(function(){
                nebula.dom.document.on('blur', '.nebula-search input', function(){
                    jQuery('.nebula-search').removeClass('searching').removeClass('autocompleted');
                });

                //I do not know why this cannot be debounced
                jQuery('input#s, input.search, input[name="s"]').on('keyup paste', async function(e){
                    await nebula.yield();

                    let $oThis = jQuery(this);
                    let allowedKeys = ['Backspace', 'Delete']; //Non-alphanumeric keys that are still allowed to trigger a search

                    if ( $oThis.val().trim().length && (nebula.isAlphanumeric(e.key, false) || allowedKeys.includes(e.key) ) ){
                        let types = false;
                        if ( $oThis.is('[data-types]') ){
                            types = $oThis.attr('data-types');
                        }

                        nebula.autocompleteSearch($oThis, types);
                    } else {
                        $oThis.closest('form').removeClass('searching');
                        $oThis.closest('.input-group, .nebula-input-group').find('.fa-spin').removeClass('fa-spin fa-spinner').addClass('fa-magnifying-glass');
                    }
                });
            });

            nebula.loadCSS(nebula.site.resources.styles.nebula_jquery_ui);
        }
    });
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name. Remember: Some functionality is conditionally loaded via dynamic imports, so if your function is not overriding properly, try listening for a DOM event (described below).

JavaScript

For non-module import functions:

nebula.autocompleteSearchListeners = function(){
    //Write your own code here, leave it blank, or return false.
}

For dynamically imported module function overrides:

jQuery(window).on('load', function(){
    nebula.autocompleteSearchListeners = function(){
        //Write your own code here, leave it blank, or return false.
    }
});

Custom Nebula DOM events do also exist, so you could also try the following if the Window Load listener does not work:

jQuery(document).on('nebula_module_loaded', function(module){
    //Note that the module variable is also available to know which module specifically was imported
    if ( typeof nebula.autocompleteSearchListeners === 'function' ){
        nebula.autocompleteSearchListeners = function(){
            //Write your own code here, leave it blank, or return false.
        }
	}
});

Menu