JQuery UI Autocomplete, from a JSON source

[localzuk]

I'm having no end of trouble with this. I am trying to use JQuery UI Autocomplete, passing a calue from one box and the typed data from another to a php script that returns JSON formatted data.

 

This is my page code

 

test

	
	
	
	


	
	
	<br />
			$(function() {<br />
				$("#cities").autocomplete({<br />
					source: function(request, response) {<br />
						$.ajax({<br />
							url: "listCities.php",<br />
							dataType: "jsonp",<br />
							data: {<br />
								Country: $("#countries").val(),<br />
								q: request.term<br />
							},<br />
							success: function(data){<br />
								response($.map(data.cityResult,function(item){<br />
									return {<br />
										label: item.AccentCity,<br />
										value: item.ID<br />
									}<br />
								}));<br />
							}<br />
						});<br />
					},<br />
					minLength: 3,<br />
					select: function(event, ui) {<br />
						alert("Selected " + ui.item.value);<br />
					},<br />
					open: function() {<br />
						$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );<br />
					},<br />
					close: function() {<br />
						$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );<br />
					}<br />
				});<br />
			});<br />
		




GeekCity


	</pre><form autocomplete="on">
	
			include('countries.php');
	?>
	
	
	
	</form><br>	<br><br><b

 

 

When I choose a country from the select and enter some text, it gets sent to the server as expected, and the listCities.php file returns data as it should (with the header for the result set to application/json) eg:

 

[color=#000000][font=monospace]{"totalResultsCount":4,"cityResult":[{"ID":"828899","AccentCity":"Bristol"},{"ID":"828900","AccentCity":"Briston"},{"ID":"831270","AccentCity":"Donibristle"},{"ID":"840905","AccentCity":"Stockland Bristol"}]}[/font][/color]

 

However, no autocomplete box appears. I simply can't see what's going wrong - it is nearly like for like copied from jQuery UI Autocomplete - Remote JSONP datasource but it just won't work. Can anyone see where I'm going wrong?

[webman]

The example you posted is using JSONP as the data format, which is only needed if the destination/datasource is on a different server; and your data isn't formatted as JSONP. You're probably wanting to use the plain 'Remote datasource' version that uses plain JSON.

 

I can't explain the difference very well but this page can: JSON to JSONP: Bypass Same-Origin Policy - CodeProject

[ZeroHour]

Hmm does it work with the examples data json url?

One thing I notice although I doubt its the problem, the example doesnt define "cities" as a textbox.

[localzuk]

All I can say is Wooooooooooooooooooooooooooooooooooooooooooo!!!!

 

Works fine now.

 

I will buy you beer (or your choice of tipple) and lots of it next time I see you webman, lol.

 

Now just to get it to put the text in one box, and the ID into the other.

Edited August 30, 2011 by localzuk

[localzuk]

Final code, which sticks a value in the cityID box, and the text name in the cities box:

 

test

	
	
	
	


	
	
	<br />
			$(function() {<br />
				$("#cities").autocomplete({<br />
					source: function(request, response) {<br />
						$.ajax({<br />
							url: "listCities.php",<br />
							data: {<br />
								Country: $("#countries").val(),<br />
								q: request.term<br />
							},<br />
							success: function(data){<br />
								response($.map(data.cityResult,function(item){<br />
									return {<br />
										label: item.AccentCity,<br />
										value: item.AccentCity,<br />
										key: item.ID<br />
									}<br />
								}));<br />
							}<br />
						});<br />
					},<br />
					minLength: 3,<br />
					select: function(event, ui) {<br />
						$("#cityID").val(ui.item.key);<br />
					},<br />
					open: function() {<br />
						$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );<br />
					},<br />
					close: function() {<br />
						$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );<br />
					}<br />
				});<br />
			});<br />
		




GeekCity


	</pre><form autocomplete="on">
	
			include('countries.php');
	?>
	
	
	
	</form><br>	<b

[webman]

No problem