Style enqueue code should normally go in a callback function added to “wp_enqueue_scripts”. But you didn’t post the entire code block here. The complete one in the linked article already includes making a callback function and adding it to “wp_enqueue_scripts”. Use the entire thing, lines 1-9, in functions.php.
It may not be doing so in a style you’re familiar with. Instead of declaring a named function and passing the name to add_action(), the entire unnamed function declaration is passed. This is perfectly acceptable except with very old PHP versions. I personally don’t think it’s good practice, but in truth I often do it myself because I’m a lazy coder 🙂 If I were to create a plugin or theme for others to use I would never use anonymous functions. Just my own personal preference.
I created a .js file using my bloc-notes, it worked, but then there was no way to open and modify it 🙁
What are you trying to modify? The autocomplete suggestions? The code in the linked article creates suggestions by querying for posts containing the typed letters. You can compile any sort of suggestion list you want. There are a number of examples for how we can make suggestion lists in the official documentation.
“As for this tutorial I’ll create an empty autocomplete.js file in my theme’s assets/js/ folder.”
I think I understand now. You added an empty file to your theme and now you want to complete the tutorial by adding the suggested code to the file. This file resides on your server, correct? You probably need add write permission to the file via FTP or your hosting file manager (all file permissions are usually 644, but sometimes 664. It’s probably currently 444, read only for all users). Or you could download the file and edit it locally, then upload the modified file back to your server.
Ok, It’s strange but I was successfull in opening (and edit) the file on my local pc by right-clicking on “edit”, on the contrary clicking on “open” doesnt open the file. Ok now I have a doubt, I’m putting the code of the tutorial in my autocomplete.js, but the author says: “In my theme the standard WordPress search field input has a class of .search-field. I’m also adding the parent form class name to further narrow it down so we don’t risk autocomplete being applied to something else using the same class.” What I should write instead of .search-field ? My website is https://test.sacconicase.com/
The function in the file is the following:
jQuery(function($) {
$('.search-form .search-field').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);
}
});
},
});
});
What you use in place of '.search-form .search-field' will be exactly the same CSS selectors you’d use to style that particular field. I assume you want to apply autocomplete to the “Ricerca per codice” field. You can use just this selector for that: '#s'
Because ID attributes should only occur once in a page, they make for very useful unambiguous selectors.
To tell the truth the field for the autocomplete doesnt exist yet, I mean I’d like to have it inside the selector of the category, so that you can select the destination in both ways: or typing yourself with autocomplete, or selecting from a dropdown menu, but it could be a good idea making a test with the field it already exists, the one you mentioned above
I have also a doubt about a path. In the autocomplete function:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('autocomplete-search', get_stylesheet_directory_uri() . '/assets/js/autocomplete.js',
['jquery', 'jquery-ui-autocomplete'], null, true);
$wp_scripts = wp_scripts();
wp_enqueue_style('jquery-ui-css',
......
........
I have this path ‘/assets/js/autocomplete.js’, my relative path how deep shoud it be? From the main root? So I’d have: ‘/wp-content/themes/sacconicase/js/autocomplete.js’
The autocomplete is not working, I think for more than one reason. First of all, the field you paid attention to is not a default wordpress search field, so maybe ‘#s’ is not right, The form has: id=”searchform” class=”searchform”, it’s a custom search form…
Yes, sorry, I was looking at the wrong field. You’ve sort of answered your own question though. The selector should now be '#searchform'. You don’t really need the class name as well since ID attributes should only occur once on the page so #searchform uniquely identifies this field only.
get_stylesheet_directory_uri() returns the URL to your theme’s root directory where its style.css file resides. So the appended path to your .js file should be relative to this directory. If you file is at /wp-content/themes/sacconicase/js/autocomplete.js then enqueue with
get_stylesheet_directory_uri() . '/js/autocomplete.js'
I implemented the code https://test.sacconicase.com/ but something is going wrong. I cant see any autocomplete and I lost also a previous function: before when I typed inside the field I saw a drop down menu suggesting me what I had already typed in previous searches, I think it was not a full autocomplete but there was…
Oh, I see what you did. I misunderstood what you were telling me about id=”searchform” class=”searchform” even though you outright said it’s the form’s attributes. You want the selector for the field itself, which is still '#s'. To ensure you only target this form’s field you could do'#searchform #s' but it’s not necessary when using ID selectors.
I replaced ‘#searchform’ by both your suggestions but nothing happens
I see $ is not a function console errors on your page. This is typically because the WP version of jQuery runs in noConflict mode, meaning you can only use the $ shortcut by declaring a noConflict wrapper similar to:
(function( $ ) {
"use strict";
// your jQuery code here. i.e.: $(document).ready( function(){} );
})(jQuery);
Alternately, replace all instances of $ shortcut with jQuery.
