You have a number of options such as the one you linked to or select2 (hidden link) which we use ourselves in certain places.
You would need to follow the documentation for whichever solution you choose, which will likely involve initiating the library on your select input (for which you will need an appropriate ID or class-based selector to identify it).
You can add such code in the custom JS section of your View or Form like so...
( function( $ ) {
$( document ).ready( function(){
// Your code here
});
})( jQuery );
That simply waits until the DOM is ready and then runs whatever code you include. Note that you can use $ for jQuery as normal.
1. add your custom JS to instantiate the autocomplete library on your select field to a .js file in your child theme (either add your code to an existing .js file or create a new one)
2. on the admin post edit screens for the custom post type where you use this select field you should
- enqueue the files of your autocomplete library of choice
- enqueue the .js file where you added your custom JS above
I can't write the JS to add the autocomplete for you, but let me point you in the right direction when it comes to how to correctly enqueue the required files:
function tssupp_enqueue_cpt_admin( $hook_suffix ){
$post_tyoe = 'cpt-slug'; // Edit for your post type
if ( in_array( $hook_suffix, array('post.php', 'post-new.php') ) ){
$screen = get_current_screen();
if ( is_object( $screen ) && $post_type == $screen->post_type ){
// Enqueue the autocomplete library files
// Enqueue the custom .js file
}
}
}
add_action( 'admin_enqueue_scripts', 'tssupp_enqueue_cpt_admin' );
Its start working, but only in one select box that is on the top. How to make it that works for a specific select box, I means is there any way by which I can add a class to that select box?
I am using this for select box in repeatable field group.
You don't have any control over the generated markup in the backend, you can't add a wrapper div or anything like that, so you will just need to use a little detective work to come up with a suitable selector that targets all of the select fields you want.
In the screenshot you can see that my repeatable field group is inside a div with id="wpcf-group-project-task-fields" which is the custom field group in question, so I could try something like
But I think you are going to find the problem is that this will work when editing existing fields, but if you add a new repeatable field group then the select field won't exist if you instantiated choose.js on DOM ready, for example.
So then you are getting into adding event listeners to the button to add a new repeatable field group and then instantiating choose.js on the newly created select field.
If this is starting to get too complex you may need to enlist the help of a developer, such as those listed in our contractors page: https://toolset.com/contractors/
It means it must work on all select box in admin panel, and its working for all select box in admin but not working on repeatable field group or nested repeatable field. Can you please examine why?
On the edit page in the admin screen open up your browser tools and check that the chosen js and css files have been added to the page. (If you are using Chrome you'll find them in the application tab).
Your script should wait for DOM ready before trying to instantiate chosen on the select fields.
It's happening because these select fields are not in the DOM when the document "ready" event is triggered. This means that your chosen initialization script is not run on these fields because RFG contents are added with AJAX after the page initially loads. Unfortunately I do not know a public event related to the AJAX load that is available, so there's not a good way to initialize these injected select fields after document.ready. You could add a setTimeout function that triggers the code after a specified amount of time, but it's not guaranteed that the fields will be ready yet.
