devbridge / jQuery-Autocomplete

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Other
3.56k stars 1.66k forks source link

Using serviceURL with PHP file always results in "Sorry, no matching results" #814

Open jshster opened 3 years ago

jshster commented 3 years ago

Trying desperately to get the library working with a PHP script. At the moment it's just returning a hardcoded JSON string but as shown in image below ... the result of the PHP file is absolutely 100% a JSON object but the autocomplete field refuses to display it. I know I'm only missing the smallest piece of the puzzle but I'll be darned if I can work out what it is.

devbridge-autocomplete

Here is the instantiation code:

        serviceUrl: 'search-projects.php', //tell the script where to send requests
        dataType: "json",
        minChars: 3,
        width: 450, //set width
        onSelect: function (suggestion) {
            $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
        transformResult: function (response) {
            console.log(response);  
            return {
                suggestions: $.map(response.myData, function (dataItem) {
                    return {value: dataItem.valueField, data: dataItem.dataField};
                })
            };
        },
        showNoSuggestionNotice: true,
        noSuggestionNotice: 'Sorry, no matching results',
    });

I have posted the same issue on StackOverflow.

tkirda commented 3 years ago

Check the response format. It should be:

{
  "suggestions": [...]
}
jshster commented 3 years ago

Hey @tkirda , thanks for the speedy reply. That does indeed solve the issue... but having now re-read the doco the option "transformResult" should, in theory, convert a non-standard response into the "suggestions" response format ... and it clearly didn't do that. Any idea why?

tkirda commented 3 years ago

Did you provide your transform result function?

jshster commented 3 years ago

Yep, sure did! Copied it here from the original posting if that helps:

 transformResult: function (response) {
           console.log(response);  
           return {
               suggestions: $.map(response.myData, function (dataItem) {
                   return {value: dataItem.valueField, data: dataItem.dataField};
               })
           };
       },