Cannot get JQuery UI Autocomplete with local JSONP data to work

I am trying to get the following JQuery UI autocomplete script with remote JSONP data to work:
http://jqueryui.com/autocomplete/#remote-jsonp

I have more or less copied the exact code on my server here:
http://www.dressorganic.co.uk/autocomplete-jsonp.htm

If you start typing a city such as London you will see it comes up with some suggestions.

The actual data comes from the following remote JSONP source:
http://ws.geonames.org/searchJSON

I decided to take a local copy of this file and place it in a text file on the server here:
http://www.dressorganic.co.uk/data/cities.txt

I then created another script to reference this file:
http://www.dressorganic.co.uk/autocomplete-jsonp-local.htm

Unfortunately the script no longer works. Am I doing something wrong? In the autocomplete JQuery script I changed:

url: "http://ws.geonames.org/searchJSON"

to

url: "http://www.dressorganic.co.uk/data/cities.txt"

My eventual aim is to reference a remote ASP script to take the value and generate a JSONP output.
mike99cAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This works fine http://www.dressorganic.co.uk/autocomplete-jsonp.htm

You have to type in at least 2 characters for it to work and there is a short lag, but it works.
0
mike99cAuthor Commented:
I noticed that a .txt file is probably not the best format to use as I need to encode the data as UTF-8. But hopefully this should not be an issue when I generate it from ASP.
0
mike99cAuthor Commented:
Hi Padas, you misunderstood my post, I know http://www.dressorganic.co.uk/autocomplete-jsonp.htm works fine but the issue is the following:

http://www.dressorganic.co.uk/autocomplete-jsonp-local.htm

This is the one that points to a local JSONP text file and I cannot get this to work.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Either one of two things.  Jsonp is supposed to be for going from one domain to the other.  But it looks like your data is different too.  Notice the extra quote in longitude.  

"countryCode":"IR","lng":49.133333,"fcodeName":"mountain",
"countryCode":"IR","lng":"49.13333","fcodeName":"mountain

Did you copy the the data exactly from the same place?

I copied this from jquery ui autocomplete and it works http://jsbin.com/osuhaYU/1/edit?html,js,output  When I replace the url with  url: "http://www.dressorganic.co.uk/data/cities.txt", it does not work http://jsbin.com/osuhaYU/2/edit   So I think it is your data

From your site
{"totalResultsCount":8443565,"geonames":[{"countryId":"130758","adminCode1":"23","countryName":"Iran","fclName":"mountain,hill,rock,... ","countryCode":"IR","lng":49.133333,"fcodeName":"mountain","toponymName":"Kūh-e Zardar","fcl":"T","name":"Kūh-e Zardar","fcode":"MT","geonameId":1,"lat":32.983333,"adminName1":"Lorestān","population":0},

Open in new window

From geonames
{"totalResultsCount":8503449,"geonames":[{"countryId":"130758","adminCode1":"23","countryName":"Iran","fclName":"mountain,hill,rock,... ","countryCode":"IR","lng":"49.13333","fcodeName":"mountain","toponymName":"Kuh-e Zardar","fcl":"T","name":"Kuh-e Zardar","fcode":"MT","geonameId":1,"lat":"32.98333","adminName1":"Lorestan","population":0},

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I use asp to json to generate json data.  https://code.google.com/p/aspjson/ and it works nicely.
0
mike99cAuthor Commented:
Hi Padas, When I created the local file I visited http://ws.geonames.org/searchJSON then I viewed source and copied the contents into a text file.

Can you advise a better way to copy the JSONP data as I need to run it from a local source to complete this task.
0
mike99cAuthor Commented:
Ok I have now created this new version:
http://www.dressorganic.co.uk/autocomplete-jsonp-local2.htm

This now points to the following file in which the GEO data is generated as an ASP string and I made sure the page is UTF-8.

http://www.dressorganic.co.uk/data/cities.asp

I compared it to:
http://ws.geonames.org/searchJSON

And it does look identical. You will need to view source on both to be able to compare it.

As you can see I still cannot get it to work.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you grabbed it from someplace slightly different by mistake.  Try again or simply just use the url http://ws.geonames.org/searchJSON

or at this point, create your own small bit of static json.  

I don't know for sure that the issue is what I pointed out, but give it a try with static data copied again.

Then static data with your own info and finally give asp to json a try.  Just a hint, they show an example to connect to your db directly. I would avoid that and actually use getrows() to extract your data and feed the function via a for next looping through the array.
0
mike99cAuthor Commented:
I found this validator:
http://jsonformatter.curiousconcept.com/

I ran http://www.dressorganic.co.uk/data/cities.asp through it and it passed. So the file is valid but I cannot get the JQuery autocomplete to read it.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
They both "validate" but only one works.  Something is different between the two files.

Did you try my suggestions yet http:#a39553476
0
mike99cAuthor Commented:
Hi padas, Ihave looked at https://code.google.com/p/aspjson/

But is this JSONP? I thought this only converts to JSON or is this going to be ok? I will give it a try using a very simple case. Presumably I will need to adjust the script to read the correct values.

Incidentally I ran some tests and the script http://www.dressorganic.co.uk/autocomplete-jsonp-local2.htm does in fact call the cities.asp file but obviously it does not get processed.
0
Chris StanyonWebDevCommented:
If you're loading the data from your own server, then just use JSON as your datatype and have done with it. You don't need to be using JSONP.

Also, as you've just figured out, your ASP (or TXT file) is not handling the querystring sent to it, so it will just spit out exactly what's in the File, regardless of what you type in your INPUT.

For things to work the way you want them to, you will need to make sure your server-side ASP script takes in the GET variables of: featureClass, style, maxRows, and name_startsWith
0
mike99cAuthor Commented:
Hi Padas, Chris, thanks for your feedback. I am fully aware the files do no accept query strings. The purpose of this task was to simply get it to work using locally hosted data. Eventually I am going to create an ASP script to take the query string values and generate the JSON data from the database.

I was hoping that by just pointing to the complete JSONP geo file it would just work but I will now try and generate my own using the script padas recommended.

Incidentally if I do use JSON instead of JSONP, how will this affect the script? Should I simply change the datatype to json?

          dataType: "json",
0
Chris StanyonWebDevCommented:
Should I simply change the datatype to json?
Yes. The reason your code is not working is because you're asking for JSONP data, but only delivering JSON data.  Your request and response need to match...

The only difference between the 2 is that JSONP data gets wrapped in a function (a callback). This is to allow cross-domain requests.

When you make an AJAX call requesting JSONP data, the URL you request automatically has a querystring apended to it: someURL?callback=aRandomString and the server then wraps the JSON data in a function:

aRandomString(
    { // this is the normal JSON data }
);

Open in new window

If you want to keep requesting JSONP data, then you need to make sure your script generates the function as well as the JSON data - you would need to read in the GET['callback'] variable and output it along with JSON data.
0
mike99cAuthor Commented:
Ok as a first step I would like to just output some static JSON data and get it listed in the autocomplete suggestions list. If I can at least get this part working I have sorted out the part of grabbing the data and displaying it. Once this is working I will make the script react to the querystring in order to generate the correct JSON data to match what was being typed.

It's just this basic part of converting the JSON data to display in the drop down list that is proving very difficult.
0
Chris StanyonWebDevCommented:
OK. Here it is. This is what your jQuery should look like:

$(document).ready(function() {
	$( "#city" ).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "data.json",
				dataType: "json",
				data: { },
				success: function( data ) {
					response( $.map( data.geonames, function( item ) {
						return {
							label: item.name + " - " + item.countryName,
							value: item.name
						}
					}));
				}
			});
		},
		select: function( event, ui ) {
			//an entry has been selected so do something with it.
			alert(ui.item.label);
		},
		minLength: 2
	});
});

Open in new window

You'll need an input with an id of city.

You will also need to create file called data.json in the same folder. To replicate the request that your autocomplete would make, build the URL manually and copy it into your browser. Copy the output into your data.json file. For example:

http://ws.geonames.org/searchJSON?featureClass=P&style=full&maxRows=12&name_startsWith=Lon

This will replicate the request made if you typed Lon into your autocomplete.

Once you've done that run your page. It won't matter what you type into your input as there's no server-side code to filter, so you if you use the data from the URL above, you will always get 12 results starting with Lon

In the script above, the autocomplete dropdown is populated with data - each item having a value (the bit you don't see) and a label (the bit you do see). When you select something from the list, you then have access to either of these bits of info, passed as properties of ui.item. It's up to you what you do with that, for example:

alert(ui.item.label); //alert the selected info
$('div#response').html(ui.item.label); //put the selected info into an div with an ID of response

Open in new window

Hope that all makes sense. Once you've got that working, you can start building on it...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mike99cAuthor Commented:
Thanks Chris. I have taken your JQuery and added to this test page:
http://www.dressorganic.co.uk/autocomplete-json.htm

It still does not work. I have created the data.json file like you said and copied the json data over by visiting

http://ws.geonames.org/searchJSON?featureClass=P&style=full&maxRows=12&name_startsWith=Lon 

I then viewed source then copied and pasted into the data.json file.

Here is the full code:

<!doctype html>

<html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
  
	body {
		font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
		font-size: 62.5%;
	}  
  
	.ui-autocomplete-loading {
		background: white url('ajax-loader.gif') right center no-repeat;
	}
	#city {
		width: 25em;
	}
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
 
    $( "#city" ).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "data.json",
				dataType: "json",
				data: { },
				success: function( data ) {
					response( $.map( data.geonames, function( item ) {
						return {
							label: item.name + " - " + item.countryName,
							value: item.name
						}
					}));
				}
			});
		},
		select: function( event, ui ) {
			//an entry has been selected so do something with it.
			alert(ui.item.label);
		},
	  minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
  </script>
  </head>
  <body>
<div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" />
</div>
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;"> Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content">
    </div>
</div>
</body>
</html>

Open in new window

0
mike99cAuthor Commented:
I have attached the json file. Just remove the .txt extension and this is the file it is reading.
data.json.txt
0
Chris StanyonWebDevCommented:
Your code generates a 404 for the data.json file - you need to have that file in the same folder as your HTML page..

Also, the code you've posted above is not the same as what I posted. Start with what I posted, get that working and build from there. Your code for example, has 2 select functions!!
0
mike99cAuthor Commented:
Oh I just got it to work:

http://www.dressorganic.co.uk/autocomplete-json2.htm

What I did was make it point to the .txt version of the JSON file as the .json file was not accessible.

Going to example in more detail then get back to you.
0
mike99cAuthor Commented:
For the record I have cleaned up the code. So it appears the file had to be a text file as it would not read a .json extension.

http://www.dressorganic.co.uk/autocomplete-json2.htm

<!doctype html>

<html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
body {
	font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
	font-size: 62.5%;
}
.ui-autocomplete-loading {
	background: white url('ajax-loader.gif') right center no-repeat;
}
#city {
	width: 25em;
}
</style>
  <script>
  $(function() {
	  
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
 
    $( "#city" ).autocomplete({
		
		source: function( request, response ) {
			$.ajax({
				url: "data.json.txt",
				dataType: "json",
				data: { },
				success: function( data ) {
					response( $.map( data.geonames, function( item ) {
						return {
							label: item.name + " - " + item.countryName,
							value: item.name
						}
					}));
				}
			});
		},
		
	    minLength: 2,
        
		select: function( event, ui ) {
          log( ui.item ?
            "Selected: " + ui.item.label :
            "Nothing selected, input was " + this.value);
        },
      
	    open: function() {
          $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
		
        close: function() {
          $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
		
    });
  });
  </script>
  </head>
  <body>
<div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" />
</div>
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;"> Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content">
    </div>
</div>
</body>
</html>

Open in new window

0
mike99cAuthor Commented:
http://www.dressorganic.co.uk/autocomplete-json3.htm

I created a version to point to an ASP file in which the JSON code is output using a response.write. So this is the first step towards getting the script to adapt to how I want it.

<%
Response.CharSet = "UTF-8"

response.write "{""totalResultsCount"":6109,""geonames"":[{""adminCode2"":""GLA"",""alternateNames"":[{""name"":""¿¿¿¿¿¿"",""lang"":""ab""},{""name"":""Londen"",""lang"":""af""},{""name"":""London"",""lang"":""als""},{""name"":""¿¿¿¿"",""lang"":""am""},{""name"":""Londres"",""lang"":""an""},{""name"":""Lunden"",""lang"":""ang""},{""name"":""¿¿¿¿"",""lang"":""ar""},{""name"":""¿¿¿¿¿¿"",""lang"":""arc""},{""name"":""¿¿¿¿"",""lang"":""arz""},{""name"":""Londres"",""lang"":""ast""},{""name"":""London"",""lang"":""az""},{""name"":""¿¿¿¿¿¿"",""lang"":""ba""},{""name"":""Londres"",""lang"":""bcl""},{""name"":""¿¿¿¿¿¿"",""lang"":""be""},{""name"":""¿¿¿¿¿¿"",""lang"":""bg""},{""name"":""¿¿¿¿¿"",""lang"":""bn""},{""name"":""¿¿¿¿¿¿¿¿"",""lang"":""bo""},{""name"":""Londrez"",""lang"":""br""},{""name"":""London"",""lang"":""bs""},{""name"":""Londres"",""lang"":""ca""},{""name"":""Lùng-dung"",""lang"":""cdo""},{""name"":""¿¿ ¿¿¿¿¿¿"",""lang"":""chr""},{""name"":""¿¿¿¿¿¿"",""lang"":""ckb""},{""name"":""Londra"",""lang"":""co""},{""name"":""Londýn"",""lang"":""cs""},{""name"":""¿¿¿¿¿¿¿"",""lang"":""cu""},{""name"":""¿¿¿¿¿¿"",""lang"":""cv""},{""name"":""Llundain"",""lang"":""cy""},{""name"":""London"",""lang"":""da""},{""name"":""London"",""lang"":""de""},{""name"":""Londra"",""lang"":""diq""},{""name"":""¿¿¿d¿¿¿"",""lang"":""el""},{""name"":""London"",""lang"":""en""},{""name"":""Londono"",""lang"":""eo""},{""name"":""Londres"",""lang"":""es""},{""name"":""London"",""lang"":""et""},{""name"":""London"",""lang"":""eu""},{""name"":""Londri"",""lang"":""ext""},{""name"":""¿¿¿¿"",""lang"":""fa""},{""name"":""Lontoo"",""lang"":""fi""},{""name"":""Londres"",""lang"":""fr""},{""name"":""Londres"",""lang"":""frp""},{""name"":""Londen"",""lang"":""fy""},{""name"":""Londain"",""lang"":""ga""},{""name"":""¿¿"",""lang"":""gan""},{""name"":""Lunnainn"",""lang"":""gd""},{""name"":""Londres"",""lang"":""gl""},{""name"":""Londye"",""lang"":""gn""},{""name"":""¿¿¿¿"",""lang"":""gu""},{""name"":""Lunnin"",""lang"":""gv""},{""name"":""Lakana"",""lang"":""haw""},{""name"":""London"",""lang"":""hbs""},{""name"":""¿¿¿¿¿¿"",""lang"":""he""},{""name"":""¿¿¿¿"",""lang"":""hi""},{""name"":""London"",""lang"":""hr""},{""name"":""Lonn"",""lang"":""ht""},{""name"":""London"",""lang"":""hu""},{""name"":""¿¿¿¿¿¿"",""lang"":""hy""},{""name"":""London"",""lang"":""ia""},{""name"":""LON"",""lang"":""iata""},{""name"":""London"",""lang"":""id""},{""name"":""Londres"",""lang"":""ilo""},{""name"":""London"",""lang"":""io""},{""name"":""Lundúnir"",""lang"":""is""},{""name"":""Londra"",""lang"":""it""},{""name"":""¿¿¿¿"",""lang"":""ja""},{""name"":""london"",""lang"":""jbo""},{""name"":""¿¿¿¿¿¿¿"",""lang"":""ka""},{""name"":""¿¿¿¿¿¿"",""lang"":""kk""},{""name"":""¿¿¿¿¿"",""lang"":""kn""},{""name"":""¿¿"",""lang"":""ko""},{""name"":""¿¿¿¿¿¿"",""lang"":""koi""},{""name"":""¿¿¿¿¿¿"",""lang"":""krc""},{""name"":""London"",""lang"":""ku""},{""name"":""¿¿¿¿¿¿"",""lang"":""kv""},{""name"":""Loundres"",""lang"":""kw""},{""name"":""¿¿¿¿¿¿"",""lang"":""ky""},{""name"":""Londinium"",""lang"":""la""},{""name"":""Londra"",""lang"":""lad""},{""name"":""London"",""lang"":""lb""},{""name"":""¿¿¿¿¿¿"",""lang"":""lbe""},{""name"":""¿¿¿¿¿¿"",""lang"":""lez""},{""name"":""Londe"",""lang"":""li""},{""name"":""Londra"",""lang"":""lij""},{""name"":""http://en.wikipedia.org/wiki/London"",""lang"":""link""},{""name"":""Lundra"",""lang"":""lmo""},{""name"":""Londoni"",""lang"":""ln""},{""name"":""¿¿¿¿¿¿"",""lang"":""lo""},{""name"":""Londonas"",""lang"":""lt""},{""name"":""Londona"",""lang"":""lv""},{""name"":""¿¿¿¿¿¿"",""lang"":""mhr""},{""name"":""Ranana"",""lang"":""mi""},{""name"":""¿¿¿¿¿¿"",""lang"":""mk""},{""name"":""¿¿¿¿¿"",""lang"":""ml""},{""name"":""¿¿¿¿¿¿"",""lang"":""mn""},{""name"":""¿¿¿¿"",""lang"":""mr""},{""name"":""¿¿¿¿¿¿"",""lang"":""mrj""},{""name"":""London"",""lang"":""ms""},{""name"":""Londra"",""lang"":""mt""},{""name"":""Londres"",""lang"":""mwl""},{""name"":""¿¿¿¿¿¿¿¿¿¿¿"",""lang"":""my""},{""name"":""¿¿¿¿"",""lang"":""mzn""},{""name"":""Londres"",""lang"":""nah""},{""name"":""Londra"",""lang"":""nap""},{""name"":""London"",""lang"":""nds""},{""name"":""¿¿¿¿¿"",""lang"":""ne""},{""name"":""¿¿¿¿¿"",""lang"":""new""},{""name"":""Londen"",""lang"":""nl""},{""name"":""London"",""lang"":""nn""},{""name"":""London"",""lang"":""no""},{""name"":""Londres"",""lang"":""nrm""},{""name"":""Londres"",""lang"":""oc""},{""name"":""¿¿¿¿¿"",""lang"":""or""},{""name"":""¿¿¿¿¿¿"",""lang"":""os""},{""name"":""Londe"",""lang"":""pcd""},{""name"":""Londyn"",""lang"":""pl""},{""name"":""Londra"",""lang"":""pms""},{""name"":""¿¿¿¿"",""lang"":""pnb""},{""name"":""¿¿¿d¿¿¿"",""lang"":""pnt""},{""name"":""¿¿¿¿"",""lang"":""ps""},{""name"":""Londres"",""lang"":""pt""},{""name"":""London"",""lang"":""qu""},{""name"":""Londra"",""lang"":""rm""},{""name"":""Londra"",""lang"":""ro""},{""name"":""¿¿¿¿¿¿"",""lang"":""ru""},{""name"":""¿¿¿¿¿¿"",""lang"":""rue""},{""name"":""¿¿¿¿¿¿"",""lang"":""sa""},{""name"":""¿¿¿¿¿¿"",""lang"":""sah""},{""name"":""Londra"",""lang"":""sc""},{""name"":""Londra"",""lang"":""scn""},{""name"":""Lunnon"",""lang"":""sco""},{""name"":""¿¿¿¿¿¿"",""lang"":""si""},{""name"":""Londýn"",""lang"":""sk""},{""name"":""London"",""lang"":""sl""},{""name"":""Londra"",""lang"":""sq""},{""name"":""¿¿¿¿¿¿"",""lang"":""sr""},{""name"":""London"",""lang"":""sv""},{""name"":""Lundun"",""lang"":""szl""},{""name"":""¿¿¿¿¿¿¿"",""lang"":""ta""},{""name"":""¿¿¿¿¿"",""lang"":""te""},{""name"":""Londres"",""lang"":""tet""},{""name"":""¿¿¿¿¿¿"",""lang"":""tg""},{""name"":""¿¿¿¿¿¿"",""lang"":""th""},{""name"":""Londres"",""lang"":""tl""},{""name"":""Landen"",""lang"":""tpi""},{""name"":""Londra"",""lang"":""tr""},{""name"":""¿¿¿¿¿¿"",""lang"":""tt""},{""name"":""¿¿¿¿¿¿"",""lang"":""udm""},{""name"":""¿¿¿¿¿¿"",""lang"":""ug""},{""name"":""¿¿¿¿¿¿"",""lang"":""uk""},{""name"":""¿¿¿¿"",""lang"":""ur""},{""name"":""Londra"",""lang"":""vec""},{""name"":""Luân Ðôn"",""lang"":""vi""},{""name"":""Londn"",""lang"":""vls""},{""name"":""London"",""lang"":""vo""},{""name"":""Londar"",""lang"":""wo""},{""name"":""¿¿"",""lang"":""wuu""},{""name"":""¿¿¿¿¿¿¿"",""lang"":""xmf""},{""name"":""¿¿¿¿¿¿"",""lang"":""yi""},{""name"":""L¿nd¿nu"",""lang"":""yo""},{""name"":""Londen"",""lang"":""zea""},{""name"":""¿¿"",""lang"":""zh""},{""name"":""¿¿"",""lang"":""zh-CN""},{""name"":""ILondon"",""lang"":""zu""}],""countryName"":""United Kingdom"",""adminCode1"":""ENG"",""score"":49.30889892578125,""lng"":-0.125741958618164,""adminName2"":""Greater London"",""fcodeName"":""capital of a political entity"",""adminName3"":"""",""timezone"":{""dstOffset"":1,""gmtOffset"":0,""timeZoneId"":""Europe/London""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":51.15168939834484,""east"":0.45212493672385795,""north"":51.865368153380956,""west"":-0.7036088539601859},""name"":""London"",""fcode"":""PPLC"",""geonameId"":2643743,""lat"":51.5085287758629,""population"":7556900,""adminName1"":""England"",""countryId"":""2635167"",""adminId1"":""6269131"",""fclName"":""city, village,..."",""countryCode"":""GB"",""adminId2"":""2648110"",""toponymName"":""London"",""fcl"":""P"",""continentCode"":""EU""},{""alternateNames"":[{""name"":""http://en.wikipedia.org/wiki/Loni%2C_India"",""lang"":""link""},{""name"":""¿¿¿¿"",""lang"":""ru""},{""name"":""LON"",""lang"":""unlc""}],""countryName"":""India"",""adminCode1"":""36"",""score"":39.95654296875,""lng"":77.288,""adminName2"":"""",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":5.5,""gmtOffset"":5.5,""timeZoneId"":""Asia/Kolkata""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":28.698893020131063,""east"":77.34806582425747,""north"":28.804160979868936,""west"":77.22793417574252},""name"":""Loni"",""fcode"":""PPL"",""geonameId"":1264773,""lat"":28.751527,""population"":164810,""adminName1"":""Uttar Pradesh"",""countryId"":""1269750"",""adminId1"":""1253626"",""fclName"":""city, village,..."",""countryCode"":""IN"",""toponymName"":""Loni"",""fcl"":""P"",""continentCode"":""AS""},{""adminCode3"":""643"",""adminCode2"":""64"",""alternateNames"":[{""name"":""http://en.wikipedia.org/wiki/Lons"",""lang"":""link""},{""name"":""64140"",""lang"":""post""},{""name"":""LOQ"",""lang"":""unlc""}],""countryName"":""France"",""adminCode1"":""97"",""score"":34.85456085205078,""lng"":-0.4,""adminCode4"":""64348"",""adminName2"":""Pyrénées-Atlantiques"",""fcodeName"":""populated place"",""adminName3"":""Arrondissement de Pau"",""timezone"":{""dstOffset"":2,""gmtOffset"":1,""timeZoneId"":""Europe/Paris""},""adminName4"":""Lons"",""adminName5"":"""",""bbox"":{""south"":43.301752420797634,""east"":-0.37949630160924763,""north"":43.331580979202364,""west"":-0.4205036983907524},""name"":""Lons"",""fcode"":""PPL"",""geonameId"":2997628,""lat"":43.3166667,""population"":13872,""adminName1"":""Aquitaine"",""adminId1"":""3037350"",""countryId"":""3017382"",""fclName"":""city, village,..."",""countryCode"":""FR"",""adminId4"":""6440480"",""adminId3"":""2988356"",""adminId2"":""2984887"",""toponymName"":""Lons"",""fcl"":""P"",""continentCode"":""EU""},{""adminCode2"":""135"",""alternateNames"":[{""name"":""http://en.wikipedia.org/wiki/Long%2C_Oklahoma"",""lang"":""link""}],""countryName"":""United States"",""adminCode1"":""OK"",""score"":33.58099365234375,""lng"":-94.5846626,""adminName2"":""Sequoyah County"",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":-5,""gmtOffset"":-6,""timeZoneId"":""America/Chicago""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":35.49669063512486,""east"":-94.5835579066485,""north"":35.49848936487515,""west"":-94.58576729335151},""name"":""Long"",""fcode"":""PPL"",""geonameId"":4541671,""lat"":35.49759,""population"":370,""adminName1"":""Oklahoma"",""adminId1"":""4544379"",""countryId"":""6252001"",""fclName"":""city, village,..."",""elevation"":261,""countryCode"":""US"",""adminId2"":""4551067"",""toponymName"":""Long"",""fcl"":""P"",""continentCode"":""NA""},{""alternateNames"":[{""name"":""¿¿¿¿¿¿¿¿"",""lang"":""ar""},{""name"":""Tanga"",""lang"":""de""},{""name"":""Tanga"",""lang"":""en""},{""name"":""Tanga"",""lang"":""eo""},{""name"":""TGT"",""lang"":""iata""},{""name"":""http://en.wikipedia.org/wiki/Tanga%2C_Tanzania"",""lang"":""link""},{""name"":""Tanga"",""lang"":""pl""},{""name"":""¿¿¿¿¿"",""lang"":""ru""},{""name"":""Tanga"",""lang"":""sv""},{""name"":""Tanga"",""lang"":""sw""},{""name"":""TGT"",""lang"":""unlc""}],""countryName"":""Tanzania"",""adminCode1"":""18"",""score"":28.903850555419922,""lng"":39.098753929138184,""adminName2"":"""",""fcodeName"":""seat of a first-order administrative division"",""adminName3"":"""",""timezone"":{""dstOffset"":3,""gmtOffset"":3,""timeZoneId"":""Africa/Dar_es_Salaam""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":-5.130422732755046,""east"":39.16048267297597,""north"":-5.007436435792431,""west"":39.0370251853004},""name"":""Longa"",""fcode"":""PPLA"",""geonameId"":149606,""lat"":-5.0689295842737385,""population"":224876,""adminName1"":""Tanga"",""countryId"":""149590"",""adminId1"":""149595"",""fclName"":""city, village,..."",""countryCode"":""TZ"",""toponymName"":""Tanga"",""fcl"":""P"",""continentCode"":""AF""},{""alternateNames"":[{""name"":""Londa"",""lang"":""en""},{""name"":""Londa"",""lang"":""eo""},{""name"":""Londa"",""lang"":""fr""},{""name"":""Londa"",""lang"":""it""},{""name"":""http://en.wikipedia.org/wiki/Londa%2C_Karnataka"",""lang"":""link""},{""name"":""Londa"",""lang"":""nap""},{""name"":""Londa"",""lang"":""nl""},{""name"":""Londa"",""lang"":""pl""},{""name"":""Londa"",""lang"":""pt""}],""countryName"":""India"",""adminCode1"":""19"",""score"":26.779632568359375,""lng"":74.51906204223633,""adminName2"":"""",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":5.5,""gmtOffset"":5.5,""timeZoneId"":""Asia/Kolkata""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":15.459011778122392,""east"":74.5294956993532,""north"":15.479122188096337,""west"":74.50862838511945},""name"":""Londa"",""fcode"":""PPL"",""geonameId"":1264792,""lat"":15.469066983109364,""population"":6131,""adminName1"":""Karnataka"",""countryId"":""1269750"",""adminId1"":""1267701"",""fclName"":""city, village,..."",""countryCode"":""IN"",""toponymName"":""Londa"",""fcl"":""P"",""continentCode"":""AS""},{""adminCode3"":""083042"",""adminCode2"":""ME"",""alternateNames"":[{""name"":""Longi"",""lang"":""de""},{""name"":""Longi"",""lang"":""en""},{""name"":""Longi"",""lang"":""eo""},{""name"":""Longi"",""lang"":""fr""},{""name"":""Longi"",""lang"":""it""},{""name"":""http://en.wikipedia.org/wiki/Longi"",""lang"":""link""},{""name"":""Longi"",""lang"":""nap""},{""name"":""Longi"",""lang"":""nl""},{""name"":""Longi"",""lang"":""pl""},{""name"":""Longi"",""lang"":""pt""},{""name"":""Lonci"",""lang"":""scn""}],""countryName"":""Italy"",""adminCode1"":""15"",""score"":26.353824615478516,""lng"":14.752275,""adminName2"":""Province of Messina"",""fcodeName"":""seat of a third-order administrative division"",""adminName3"":""Longi"",""timezone"":{""dstOffset"":2,""gmtOffset"":1,""timeZoneId"":""Europe/Rome""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":38.02286217562428,""east"":14.757984033124846,""north"":38.03185582437571,""west"":14.746565966875153},""name"":""Longi"",""fcode"":""PPLA3"",""geonameId"":2524369,""lat"":38.027359,""population"":1653,""adminName1"":""Sicily"",""adminId1"":""2523119"",""countryId"":""3175395"",""fclName"":""city, village,..."",""countryCode"":""IT"",""adminId3"":""6540830"",""adminId2"":""2524169"",""toponymName"":""Longi"",""fcl"":""P"",""continentCode"":""EU""},{""adminCode2"":""0289"",""alternateNames"":[{""name"":""http://en.wikipedia.org/wiki/Londi"",""lang"":""link""}],""countryName"":""Estonia"",""adminCode1"":""19"",""score"":25.717041015625,""lng"":26.1458333,""adminName2"":""Karula vald"",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":3,""gmtOffset"":2,""timeZoneId"":""Europe/Tallinn""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":57.74683965124857,""east"":26.162694423099428,""north"":57.76482694875143,""west"":26.12897217690057},""name"":""Londi"",""fcode"":""PPL"",""geonameId"":794521,""lat"":57.7558333,""population"":0,""adminName1"":""Valgamaa"",""countryId"":""453733"",""adminId1"":""587875"",""fclName"":""city, village,..."",""countryCode"":""EE"",""adminId2"":""7522297"",""toponymName"":""Londi"",""fcl"":""P"",""continentCode"":""EU""},{""alternateNames"":[{""name"":""http://en.wikipedia.org/wiki/Lonau"",""lang"":""link""}],""countryName"":""Germany"",""adminCode1"":""06"",""score"":24.654449462890625,""lng"":10.357699,""adminName2"":"""",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":2,""gmtOffset"":1,""timeZoneId"":""Europe/Berlin""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":51.68190135124824,""east"":10.372210022253194,""north"":51.69988864875175,""west"":10.343187977746807},""name"":""Lonau"",""fcode"":""PPL"",""geonameId"":2875999,""lat"":51.690895,""population"":0,""adminName1"":""Lower Saxony"",""countryId"":""2921044"",""adminId1"":""2862926"",""fclName"":""city, village,..."",""countryCode"":""DE"",""toponymName"":""Lonau"",""fcl"":""P"",""continentCode"":""EU""},{""alternateNames"":[{""name"":""http://en.wikipedia.org/wiki/Logje"",""lang"":""link""}],""countryName"":""Slovenia"",""adminCode1"":""46"",""score"":24.441543579101562,""lng"":13.4375,""adminName2"":"""",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":2,""gmtOffset"":1,""timeZoneId"":""Europe/Ljubljana""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":46.22628435124857,""east"":13.450504396847288,""north"":46.24427164875143,""west"":13.424495603152712},""name"":""Longo"",""fcode"":""PPL"",""geonameId"":3196286,""lat"":46.235278,""population"":0,""adminName1"":""Kobarid"",""countryId"":""3190538"",""adminId1"":""3239098"",""fclName"":""city, village,..."",""countryCode"":""SI"",""toponymName"":""Logje"",""fcl"":""P"",""continentCode"":""EU""},{""adminCode3"":""H9"",""adminCode2"":""GLA"",""alternateNames"":[{""name"":""¿¿¿¿¿ ¿¿¿¿"",""lang"":""ar""},{""name"":""¿¿¿¿"",""lang"":""be""},{""name"":""¿¿¿¿"",""lang"":""bg""},{""name"":""Kêr Londrez"",""lang"":""br""},{""name"":""La City"",""lang"":""ca""},{""name"":""Dakbayan sa Londres"",""lang"":""ceb""},{""name"":""City"",""lang"":""cs""},{""name"":""Dinas Llundain"",""lang"":""cy""},{""name"":""S¿t¿ t¿¿ ¿¿¿d¿¿¿¿"",""lang"":""el""},{""name"":""City"",""lang"":""eo""},{""name"":""City de Londres"",""lang"":""es""},{""name"":""¿¿¿¿ ¿¿¿¿"",""lang"":""fa""},{""name"":""Lontoon City"",""lang"":""fi""},{""name"":""Cité de Londres"",""lang"":""fr""},{""name"":""Cathair Londan"",""lang"":""ga""},{""name"":""Cidade de Londres"",""lang"":""gl""},{""name"":""¿¿¿¿¿ ¿¿ ¿¿¿¿¿¿"",""lang"":""he""},{""name"":""¿¿¿¿ ¿¿¿ ¿¿¿¿"",""lang"":""hi""},{""name"":""¿¿¿¿¿¿¿¿¿ ¿¿¿¿"",""lang"":""hy""},{""name"":""Lundúnaborg"",""lang"":""is""},{""name"":""Città di Londra"",""lang"":""it""},{""name"":""¿¿¿·¿¿·¿¿¿¿"",""lang"":""ja""},{""name"":""¿¿¿¿¿¿"",""lang"":""ko""},{""name"":""Urbs Londiniensis"",""lang"":""la""},{""name"":""http://en.wikipedia.org/wiki/City_of_London"",""lang"":""link""},{""name"":""Londono Sitis"",""lang"":""lt""},{""name"":""Londonas Sitija"",""lang"":""lv""},{""name"":""¿¿¿¿ ¿¿ ¿¿¿¿"",""lang"":""mr""},{""name"":""Bandaraya London"",""lang"":""ms""},{""name"":""¿¿¿¿ ¿¿¿"",""lang"":""pnb""},{""name"":""Cidade de Londres"",""lang"":""pt""},{""name"":""¿¿¿¿"",""lang"":""ru""},{""name"":""Ceety o Lunnon"",""lang"":""sco""},{""name"":""¿¿¿¿ ¿¿¿¿¿¿"",""lang"":""sr""},{""name"":""¿¿¿¿¿¿¿¿¿"",""lang"":""th""},{""name"":""Lungsod ng Londres"",""lang"":""tl""},{""name"":""Londra Sehri"",""lang"":""tr""},{""name"":""¿¿¿¿¿¿¿¿¿¿ ¿¿¿¿"",""lang"":""uk""},{""name"":""Thành ph¿ Luân Ðôn"",""lang"":""vi""},{""name"":""London"",""lang"":""war""},{""name"":""¿¿¿¿ ¿¿¿ ¿¿¿¿¿¿"",""lang"":""yi""},{""name"":""¿¿¿"",""lang"":""zh""},{""name"":""Idolobha weLondon"",""lang"":""zu""}],""countryName"":""United Kingdom"",""adminCode1"":""ENG"",""score"":23.59185791015625,""lng"":-0.0918388366699219,""adminName2"":""Greater London"",""fcodeName"":""seat of a third-order administrative division"",""adminName3"":""City of London"",""timezone"":{""dstOffset"":1,""gmtOffset"":0,""timeZoneId"":""Europe/London""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":51.15594951276414,""east"":0.48608279418977673,""north"":51.86962826782626,""west"":-0.6697604675296205},""name"":""London"",""fcode"":""PPLA3"",""geonameId"":2643741,""lat"":51.5127888902952,""population"":7556900,""adminName1"":""England"",""adminId1"":""6269131"",""countryId"":""2635167"",""fclName"":""city, village,..."",""countryCode"":""GB"",""adminId3"":""2643744"",""adminId2"":""2648110"",""toponymName"":""City of London"",""fcl"":""P"",""continentCode"":""EU""},{""alternateNames"":[{""name"":""¿¿¿¿"",""lang"":""ar""},{""name"":""London"",""lang"":""de""},{""name"":""London"",""lang"":""en""},{""name"":""Londono"",""lang"":""eo""},{""name"":""London"",""lang"":""es""},{""name"":""London"",""lang"":""et""},{""name"":""¿¿¿¿¿ ¿¿¿¿¿¿¿"",""lang"":""fa""},{""name"":""London"",""lang"":""fi""},{""name"":""London"",""lang"":""fr""},{""name"":""¿¿¿¿¿¿"",""lang"":""he""},{""name"":""YXU"",""lang"":""iata""},{""name"":""¿¿¿¿"",""lang"":""ja""},{""name"":""¿¿¿¿¿¿¿"",""lang"":""ka""},{""name"":""¿¿"",""lang"":""ko""},{""name"":""http://en.wikipedia.org/wiki/London%2C_Ontario"",""lang"":""link""},{""name"":""Londonas"",""lang"":""lt""},{""name"":""London"",""lang"":""nl""},{""name"":""¿¿¿¿¿¿"",""lang"":""os""},{""name"":""London"",""lang"":""pl""},{""name"":""¿¿¿¿"",""lang"":""pnb""},{""name"":""London"",""lang"":""pt""},{""name"":""¿¿¿¿¿¿"",""lang"":""ru""},{""name"":""¿¿¿¿¿¿"",""lang"":""sr""},{""name"":""¿¿¿¿¿¿"",""lang"":""uk""},{""name"":""LOD"",""lang"":""unlc""},{""name"":""¿¿¿¿¿ ¿¿¿¿¿¿¿¿"",""lang"":""ur""},{""name"":""¿¿"",""lang"":""zh""},{""name"":""¿¿"",""lang"":""zh-CN""}],""countryName"":""Canada"",""adminCode1"":""08"",""score"":23.378952026367188,""lng"":-81.233042387,""adminName2"":"""",""fcodeName"":""populated place"",""adminName3"":"""",""timezone"":{""dstOffset"":-4,""gmtOffset"":-5,""timeZoneId"":""America/Toronto""},""adminName4"":"""",""adminName5"":"""",""bbox"":{""south"":42.907075642763076,""east"":-81.12859509753737,""north"":43.05970292323693,""west"":-81.33748967646262},""name"":""London"",""fcode"":""PPL"",""geonameId"":6058560,""lat"":42.983389283,""population"":346765,""adminName1"":""Ontario"",""countryId"":""6251999"",""adminId1"":""6093943"",""fclName"":""city, village,..."",""countryCode"":""CA"",""toponymName"":""London"",""fcl"":""P"",""continentCode"":""NA""}]}"
%>

Open in new window

0
Chris StanyonWebDevCommented:
Excellent . We're making progress :)

Your data.json file didn't exist on the server which is why it couldn't read it!

Now that you're reading data from the ASP page, you need to pass the data into that script so you can filter. The information gets passed to your script as GET variables (from the data argument). The value you type into the input is passed in the term property of the request object, so you need to add something like this:

data: { 
    startsWith: request.term
},

Open in new window

You then have access to that value in your ASP script as GET['startsWith']
0
mike99cAuthor Commented:
Hi Chris, thanks for this. That was my next question so I am going to give this a go now and let you know.
0
mike99cAuthor Commented:
Great I have it working now and reading the value. I added the following from the original JQuery UI script.

				data: {
					featureClass: "P",
					style: "full",
					maxRows: 12,
					name_startsWith: request.term
				},

Open in new window


In my ASP code I was able to read the the text which was typed in as follows:

request.querystring("name_startsWith")

The same goes for all the other fields within data.

I should now be in a position to implement this fully by comparing the data with stored values in the database.
0
Chris StanyonWebDevCommented:
Looks like you're pretty much there :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.