Autocomplete JS

In the place of “// your jQuery code here. i.e.: $(document).ready( function(){} ); ” I have to simply put all my code such as:

jQuery(function($) {
	$('#searchform #s').autocomplete({
		source: function(request, response) {
			$.ajax({
				dataType: 'json',
				url: AutocompleteSearch.ajax_url,
				data: {
					term: request.term,
					action: 'autocompleteSearch',
					security: AutocompleteSearch.ajax_nonce,
				},
				success: function(data) {
					response(data);
				}
			});
		},
		select: function(event, ui) {
			window.location.href = ui.item.link;
		},
	});
});

That’s probably OK, I’ve not checked it thoroughly though. There are other “$ is not a function” issues related to date picker inline script (check the page’s source HTML starting at line 80). This:

           jQuery(document).ready(function($) {
                $('.sf-datepicker').datepicker().on('focus', function(e) {
                    $(this).trigger('blur');
                });
            });

            $(document).on("sf:ajaxfinish", ".searchandfilter", function() {
                $('.sf-datepicker').datepicker().on('focus', function(e) {
                    $(this).trigger('blur');
                });
            });

The first part uses a “noConflict” wrapper similar to what you did. Fine, no problem. But it does not encompass the second part, which is identical code except without the noConflict wrapper. The second part ought to be removed. I don’t know why it’s there. Is it part of a plugin?

Errors like this can affect all other script on the page, even if it’s unrelated. There is also a “datepicker is not a function” error. This is usually caused by the inline script being encountered before the script that defines the function is encountered. It’s an issue of not properly enqueuing the different parts, as in not specifying appropriate dependencies.

I did the following

(function( $ ) {

    "use strict";
    
   jQuery(function($) {
	$('#searchform #s').autocomplete({
		source: function(request, response) {
			$.ajax({
				dataType: 'json',
				url: AutocompleteSearch.ajax_url,
				data: {
					term: request.term,
					action: 'autocompleteSearch',
					security: AutocompleteSearch.ajax_nonce,
				},
				success: function(data) {
					response(data);
				}
			});
		},
		select: function(event, ui) {
			window.location.href = ui.item.link;
		},
	});
});

})(jQuery);

but I cant see any autocomplete working. The part of code you reported with “sf-datepicker” inside is probably part of search and filter plugin that I removed, I think I should remove it too, I cant see in which folder it is…

At least your code isn’t throwing the errors ?? But it can fail to work due to other JS errors. The redundant date picker code is now gone, but there are still related errors. Because it occurs as inline script, it’s difficult to know where it came from, other than it’s something that uses datepicker().

You can determine the responsible plugin by selectively deactivating plugins until the console errors go away. Then you can either do without the plugin, find a replacement, or correct its code yourself.

I deleted the plug in “search and filter”, but my autocomplete doesnt work

I’m still seeing date picker related script errors. You don’t need me to check for errors, they show up in your browser’s console. Narrow down which plugin they’re coming from by deactivating all plugins. There now should be no script errors in the console. Be aware that caching can confuse this investigation. If you’re logged into your site, server side caching is normally bypassed, but your browser might still cache pages locally. Be sure that has been cleared as well.

If script errors appear with no plugins active, then your theme is responsible. If no errors are observed, activate your normal plugins, one at a time, checking for errors after each. When the errors return, the last activated plugin is the source.

These errors need to be resolved before you can expect your autocomplete to work. But don’t be surprised if it still does not. But with date picker errors out of the way it’ll be much easier to debug autocomplete.

Ok, I found the origin of the error (in reality I was looking for something else), there was a disturbing function that was related to the old search and filter plug in

function wpb_hook_javascript() {
    ?>
        <script>
          jQuery(document).ready(function($) {
  $('.sf-datepicker').datepicker().on('focus', function (e) {
        $(this).trigger('blur');
    });
});

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
  $('.sf-datepicker').datepicker().on('focus', function (e) {
        $(this).trigger('blur');
    });
});
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

now I should re-see all the stuff and re-insert all the code I had