I am getting an erro while using a chosen jquery function

Question

I have used used the chosen function in my file but it is given an error when i tried to access this function as follows:

TypeError: $(...).ajaxChosen is not a function

here is the code that i am using :

 $.post( woocommerce_admin_meta_boxes_variations.ajax_url, data, function ( response ) {

        $( '#bto_config_group_inner .bto_groups' ).append( response );

        $( "#bto_ids_" + bto_groups_metabox_count ).chosen();

        $( "#bto_ids_" + bto_groups_metabox_count ).ajaxChosen( {
            method:         'GET',
            url:            woocommerce_admin_meta_boxes.ajax_url,
            dataType:       'json',
            afterTypeDelay: 100,
            data:           {
                action:         'woocommerce_json_search_products',
                security:       woocommerce_admin_meta_boxes.search_products_nonce
            }
        }, function (data) {

            var terms = {};

            $.each( data, function (i, val) {
                terms[i] = val;
            } );

            return terms;
        } );

        $( 'input#_per_product_pricing_bto' ).change();

        $( '#bto_product_data' ).unblock();
        $( '#bto_product_data' ).trigger( 'woocommerce_bto_component_added' );

    } );

    return false;

} );

Answer 1

Have you included https://github.com/meltingice/ajax-chosen in your project? Looks like it is not visible in your code.

Answer 2

You will need to download the file - https://github.com/meltingice/ajax-chosen/blob/master/lib/ajax-chosen.min.js

Place it in your project so that it can be referenced with your other assets and include it using the

<script type="text/javascript" src="path/to/ajax-chosen.min.js"></script>

Ideally you would use NPM to bring down the asset, but just simply copying the file locally will suffice to get you up and running

I was unable to find a CDN link for this file, so its going to have to be done manually.