JQuery UI Autocomplete - AJAX Call In Wordpress Not Working

js123

Hello,

I am having trouble with an implementation of JQuery UI Autocomplete in Editor. I have it set up as follows (using the plugin):

        {
            "label": "Company",
            "name": "company",
            "type": "autoComplete",
             "opts": {
                source: function( request, response ) {
                    $.ajax({
                        dataType: "json",
                        type: 'GET',
                        url: MyAcSearch1.url,
                        data: {
                            'action': 'pld_my_contacts_companies_autocomplete',
                            'term': request.term
                            }                           
                    });
                }                   
            }               
        },

When I search for "co", this returns a JSON string of ["Company 1","Company 2","Another Company"], which seems correct. However, the dropdown box does not show. (The jquery-ui.js and jquery-ui.css files are correctly loaded.)

The following, however, works:

        {
            "label": "Company",
            "name": "company",
            "type": "autoComplete",
             "opts": {

                source: [ "Company 1", "Company 2", "Another Company" ]
            }               
        },

It creates a dropdown and looks fine.

Any ideas why I am able to create the dropdown box with the second code but not the first? Thank you.

allan

It might be that you need to check with the jQuery UI folks, but I suspect the issue is that you aren't called in the response() method that is passed into the source function. So jQuery UI never knows when the Ajax has completed. Have a look at this example on the jQuery UI site for example.

Allan

js123

That was just the code snippet that I needed. It now displays the data that it received in JSON format. So I have a functioning JQuery UI Autocomplete that is populated dynamically. Thank you!

js123

To be clear, it was the following code that was missing:

success: function( data ) {
response( data );
}