+ 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
    18,530
    Thank Post
    527
    Thanked 2,648 Times in 2,049 Posts
    Blog Entries
    24
    Rep Power
    925

    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,422
    Thank Post
    645
    Thanked 967 Times in 667 Posts
    Blog Entries
    2
    Rep Power
    328
    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,838
    Thank Post
    974
    Thanked 1,407 Times in 851 Posts
    Blog Entries
    1
    Rep Power
    460
    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
    18,530
    Thank Post
    527
    Thanked 2,648 Times in 2,049 Posts
    Blog Entries
    24
    Rep Power
    925
    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 05:02 PM.

  6. #5

    localzuk's Avatar
    Join Date
    Dec 2006
    Location
    Minehead
    Posts
    18,530
    Thank Post
    527
    Thanked 2,648 Times in 2,049 Posts
    Blog Entries
    24
    Rep Power
    925
    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,422
    Thank Post
    645
    Thanked 967 Times in 667 Posts
    Blog Entries
    2
    Rep Power
    328
    No problem



SHARE:
+ Post New Thread

Similar Threads

  1. Replies: 1
    Last Post: 22nd February 2011, 11:45 AM
  2. Replies: 1
    Last Post: 17th January 2011, 03:36 PM
  3. Replies: 22
    Last Post: 15th June 2010, 09:16 AM
  4. Replies: 44
    Last Post: 1st June 2010, 07:11 PM
  5. Accessing work from home.
    By eejit in forum Windows
    Replies: 33
    Last Post: 1st June 2007, 02: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
  •