+ Post New Thread
Results 1 to 6 of 6
Web Development Thread, JQuery UI Autocomplete, from a JSON source in Coding and Web Development; I'm having no end of trouble with this. I am trying to use JQuery UI Autocomplete, passing a calue from ...
  1. #1

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,879
    Thank Post
    518
    Thanked 2,486 Times in 1,928 Posts
    Blog Entries
    24
    Rep Power
    838

    JQuery UI Autocomplete, from a JSON source

    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

    Code:
    <html>
    <head>
    	<title>test</title>
    	<meta http-equiv="X-UA-Compatible" content="IE=9" >
    		<script src="js/jquery-1.6.2.min.js"></script>
    		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    		<script src="js/jquery.ui.core.js"></script>
    		<script src="js/jquery.ui.widget.js"></script>
    
    
    		<script src="js/jquery.ui.position.js"></script>
    		<script src="js/jquery.ui.autocomplete.js"></script>
    		<script>
    			$(function() {
    				$("#cities").autocomplete({
    					source: function(request, response) {
    						$.ajax({
    							url: "listCities.php",
    							dataType: "jsonp",
    							data: {
    								Country: $("#countries").val(),
    								q: request.term
    							},
    							success: function(data){
    								response($.map(data.cityResult,function(item){
    									return {
    										label: item.AccentCity,
    										value: item.ID
    									}
    								}));
    							}
    						});
    					},
    					minLength: 3,
    					select: function(event, ui) {
    						alert("Selected " + ui.item.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>
    	
    	<h1>GeekCity</h1>
    
    
    		<form autocomplete="on">
    		<select name='countries' id='countries'>
    		<?php
    		include('countries.php');
    		?>
    		</select>
    		<input type='textbox' id='cities' />
    		<input type='textbox' id='cityID' />
    		</form>
    		
    </body>
    </html>

    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:

    Code:
    {"totalResultsCount":4,"cityResult":[{"ID":"828899","AccentCity":"Bristol"},{"ID":"828900","AccentCity":"Briston"},{"ID":"831270","AccentCity":"Donibristle"},{"ID":"840905","AccentCity":"Stockland Bristol"}]}


    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?


  2. #2

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,406
    Thank Post
    640
    Thanked 961 Times in 661 Posts
    Blog Entries
    2
    Rep Power
    324
    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

  3. Thanks to webman from:

    localzuk (30th August 2011)

  4. #3

    ZeroHour's Avatar
    Join Date
    Dec 2005
    Location
    Edinburgh, Scotland
    Posts
    5,627
    Thank Post
    920
    Thanked 1,336 Times in 816 Posts
    Blog Entries
    1
    Rep Power
    448
    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.

  5. #4

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,879
    Thank Post
    518
    Thanked 2,486 Times in 1,928 Posts
    Blog Entries
    24
    Rep Power
    838
    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.
    Last edited by localzuk; 30th August 2011 at 04:02 PM.

  6. #5

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    17,879
    Thank Post
    518
    Thanked 2,486 Times in 1,928 Posts
    Blog Entries
    24
    Rep Power
    838
    Final code, which sticks a value in the cityID box, and the text name in the cities box:

    Code:
    <html><head>
    	<title>test</title>
    	<meta http-equiv="X-UA-Compatible" content="IE=9" >
    		<script src="js/jquery-1.6.2.min.js"></script>
    		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    		<script src="js/jquery.ui.core.js"></script>
    		<script src="js/jquery.ui.widget.js"></script>
    
    
    		<script src="js/jquery.ui.position.js"></script>
    		<script src="js/jquery.ui.autocomplete.js"></script>
    		<script>
    			$(function() {
    				$("#cities").autocomplete({
    					source: function(request, response) {
    						$.ajax({
    							url: "listCities.php",
    							data: {
    								Country: $("#countries").val(),
    								q: request.term
    							},
    							success: function(data){
    								response($.map(data.cityResult,function(item){
    									return {
    										label: item.AccentCity,
    										value: item.AccentCity,
    										key: item.ID
    									}
    								}));
    							}
    						});
    					},
    					minLength: 3,
    					select: function(event, ui) {
    						$("#cityID").val(ui.item.key);
    					},
    					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>
    	
    	<h1>GeekCity</h1>
    
    
    		<form autocomplete="on">
    		<select name='countries' id='countries'>
    		<?php
    		include('countries.php');
    		?>
    		</select>
    		<input id='cities' />
    		<input type='textbox' id='cityID' />
    		</form>
    		
    </body>
    </html>

  7. Thanks to localzuk from:

    ZeroHour (30th August 2011)

  8. #6

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,406
    Thank Post
    640
    Thanked 961 Times in 661 Posts
    Blog Entries
    2
    Rep Power
    324
    No problem

SHARE:
+ Post New Thread

Similar Threads

  1. Replies: 1
    Last Post: 22nd February 2011, 10:45 AM
  2. Replies: 1
    Last Post: 17th January 2011, 02:36 PM
  3. Replies: 22
    Last Post: 15th June 2010, 08:16 AM
  4. Replies: 44
    Last Post: 1st June 2010, 06:11 PM
  5. Accessing work from home.
    By eejit in forum Windows
    Replies: 33
    Last Post: 1st June 2007, 01:47 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •