Question

I change the autocomplete data source to my php file, and I have tried the code below. But it’s not work, could someone suggest how to fix it?

Thanks

$('#search').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/property_bldg.php",
            dataType: "jsonp",
            data: {
                query: request.term
            },
            success: function( data ) {
                response( $.map( data.suggestions, function( item ) {
                    return {
                        label: item.text,
                        value: item.text
                    }
                }));
            }
        });
    },
    minLength: 1
})

Return

{query:'A',par1:'',suggestions:['AUSTIN RD','ARCH','ARGYLE ST','AMOY GDN','ARIA','AQUAMARINE','ACADEMIC TERR','APEX','ALLWAY GDN','AP LEI CHAU DRIVE'],data:[]}

Updated:

$('#autocomplete_propSearch').autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/property_bldg.php",
            dataType: "json",
            data: {
                query: request.term
            },
            complete: function (xhr, status) {
                if (status === 'error' || !xhr.responseText) {
                    alert('Error')
                }
                else {

                    response( $.map( xhr.responseText.suggestions, function( item ) {
                        return {
                            label: item,
                            value: item
                        }
                    }));
                }
            }
        });
    },
    minLength: 1
})

Answer 1

You’re iterating over an array of strings, but trying to access the text property of them. Change your map body to:

                return {
                    label: item,
                    value: item
                }

Working example at jsFiddle. If that doesn’t work for you, check whether the ajax call really completed successfully (by printing data to console, for instance).

Update: if your server is returning exactly what you posted, then it’s not a valid JSONP response. See this tutorial and the jQuery docs for the proper way of doing JSONP (though, if you’re querying the same domain that served the page, it’s simpler – and safer – to use json instead).

For instance, if your server is receiving the query:

http://127.0.0.1:8080/property_bldg.php?callback=jQuery161006659467399874042_13‌​59964924178&query=a&_=1359964930143

The correct response should be:

jQuery161006659467399874042_13‌​59964924178({query:'A',par1:'',suggestions:['AUSTIN RD','ARCH','ARGYLE ST','AMOY GDN','ARIA','AQUAMARINE','ACADEMIC TERR','APEX','ALLWAY GDN','AP LEI CHAU DRIVE'],data:[]});

And its content-type should be text/javascript (not application/json). You can customize that if you want, read the docs for more info.