jQuery Forum

Does anyone have any hints at all with where to look to fix this?

Thanks

David

Your Autocomplete looks OK.  Two questions:

1. the selector for autocomplete is a class and the A is capitalized.  Is that the way your HTML reads? Often input boxes have ids and a convention is to use lower case letters.  In other words, is autocomplete matched correctly to your HTML?

2. the data: option is correct for sending data to geonames.org.  Is it correct for sending data to the ProudlyCarbonNeutral web service?  Usually web services have unique data input formats.  Check their documentation.

Thanks for replying Mike

In response...

1. Yes, the A in Airports for the class is capitalised throughout.

2. I understand this is for receiving data, not sending it.  I've tried to setup the json the same at http://www.proudlycarbonneutral.com/CarbonFootprintCalculator/FlightList.aspx as the geonames.org sample and the rest of the code is presented much the same... working with the sample datasource but not the one I've created.

Still quite stuck on this unfortunately.

The data: option sends data to the location specified in the url: option.  So it is sending 4 key-value pairs to the url and expecting that site's API to recognize the 4 keys and take in the 4 values for processing - usually to set parameters for a database query.

Data is received in an ajax transation through the success: option.  In your code, the success: option is expecting data in the jsonp format - not json.  You mention json in point 2 above, but your code is not able to execute with json formatted data.

If  www.proudlycarbonneutral.com  is your site, you should use JSON, as that is the data format for a remote server (your domain).  If it is someone else's site (not your domain), your transaction crosses domains, and you have to use jsonp.  Its not clear to me which you are doing.  When I said your code looks OK, I thought you were crossing domains and getting data from some other site called www.proudlycarbonneutral.com   If that is not the case, your code has problems and you might take a look at a post I made some time ago that has information, and code, about how to set up a remote server to feed Autocomplete

https://forum.jquery.com/topic/autocomplete-how-to-use-mysql-data

Thanks Mike

I really do appreciate the help you've been giving.

Look at the links you sent, and the examples here... I can use the Remote Datasource approach which is a bit simpler.

I've added the 'term' string into the query when it's loading which should make it more efficient but also changed the code to be:

1. jQuery( ".Airports" ).autocomplete({
               source: "http://www.proudlycarbonneutral.com/CarbonFootprintCalculator/FlightList.aspx",
               minLength: 2,
               select: function( event, ui ) {
                   log( ui.item ?
                       "Selected: " + ui.item.AirportName:
                       "Nothing selected, input was " + this.value );
               }
            });
   
   

This does seem to load it, in that it shows the ajax loading icone for a short while but then it disappears and no listing is shown.

Eg. if 'los' is used in the input, then the JSON would appear as http://www.proudlycarbonneutral.com/CarbonFootprintCalculator/FlightList.aspx?term=los which shows 3 airports to choose from.

Unfortunately the form isn't showing the usual autocomplete select list.  I did try removing the 'select' code from the autocomplete function above as it's a single field list to be shown but that didn't help.

I take it this is much closer?  Is there something obvious not right in the above?

Many thanks

David

I actually removed the select section to have the code:

1. jQuery( ".Airports" ).autocomplete({
               source: "http://www.proudlycarbonneutral.com/CarbonFootprintCalculator/FlightList.aspx",
               minLength: 2
            })

as I saw what the select event was doing and didn't need it.  I also changed my JSON datasource to read along the lines:

1. {
       "totalResultsCount": 3,
       "airportlist": [
           {
               "value": "GIG - Galeao Antonio Carlos Jobim (Brazil)"
           },
           {
               "value": "LAX - Los Angeles International (United States)"
           },
           {
               "value": "LOS - Lagos Murtala Muhammed (Nigeria)"
           }
       ]
   }
   

What might not be right with this?

Thanks

JSON for Autocomplete should be {"key":"value"} pairs - only.  The above JSON has a key of  airportlist and 3 values for it.  Just deliver {"value": "GIG - Galeao Antonio Carlos Jobim (Brazil)"}, {next one}, {next one}  In that case, the key is value, and the value is "GIG - Galeao Antonio Carlos Jobim (Brazil)" -  and so forth.  If you need to know the number of items, use some JS to count the items.

Thanks Mike

My JSON now returns something like:

1. {"value":"GIG - Galeao Antonio Carlos Jobim (Brazil)"},{"value":"LAX - Los Angeles International (United States)"},{"value":"LOS - Lagos Murtala Muhammed (Nigeria)"}

That is it entirely, and the loading runs for a little while but then no dropdown list appears so the autocomplete still isn't doing anything.

Have I got this right?

Thanks

The "JSON" you posted is not JSON.  It needs square brackets surrounding it. Maybe your code produces that and you didn't copy it, or maybe that's the problem.  If your server is PHP, are you using json_encode()? 

Hi Mike

Not using php or anything like that... just having the JSON put together using my own coding so I'm tryign to follow your advice exactly.

Bit confused now because my code previously seems to be in a correct format, though

1. {
       "totalResultsCount": 3,
       "airportlist": [
           {
               "value": "GIG - Galeao Antonio Carlos Jobim (Brazil)"
           },
           {
               "value": "LAX - Los Angeles International (United States)"
           },
           {
               "value": "LOS - Lagos Murtala Muhammed (Nigeria)"
           }
       ]
   }

From what I can see, this seems right but you replied "JSON for Autocomplete should be {"key":"value"} pairs - only.  The above JSON has a key of  airportlist and 3 values for it.".

I'm just not sure as it seems the key is already value and the object is named 'airportlist' which has 3 items within it.  How should this appear any differently to the above?

Thanks

For Autocomplete, the JSON data you feed it should have key-value pairs and look like

data4Autocomplete = [
        {
            "value": "GIG - Galeao Antonio Carlos Jobim (Brazil)"
        },
        {
            "value": "LAX - Los Angeles International (United States)"
        },
        {
            "value": "LOS - Lagos Murtala Muhammed (Nigeria)"
        }
    ]

The Firebug Console should show you a message line for the returned array when you execute that Autocomplete.  When you click on the message line + sign to expand it, you will see 3 or 4 tabs. One will tell you the data, if any, that went from Javascript to your server, another, called response, will show you the contents of the array that your server sent to Javascript.  That tab should show

[
        {
            "value": "GIG - Galeao Antonio Carlos Jobim (Brazil)"
        },
        {
            "value": "LAX - Los Angeles International (United States)"
        },
        {
            "value": "LOS - Lagos Murtala Muhammed (Nigeria)"
        }
    ]

If you're using an object literal, use only the objectName.airportlist to feed data to Autocomplete. Its hard for me to determine the context and use of the object that you posted.