jQuery Forum

You need to extract the returned values from the JSON, something like this:

1. $('#SSN').live('change', function() {
2.     //ajax request
3.     $.ajax({
4.         type: 'GET',
5.         url: 'search.php',
6.         data: {SSN: $('#SSN').val()},
7.         dataType: 'json',
8.         success: function(data) {
9.             $('#Name').val(data.Name);
10.             $('#Surname').val(data.Surname);
11.         }
12.     });
13. });

Tried it, I get an erro:

Uncaught TypeError: Cannot read property 'Name' of null

Can you show what the returned JSON looks like?

Kailea,
There are problems in your success function, and I suspect problems in your PHP, though I don't understand your objective in using array_slice. Normally, the elements retrieved in the loop are push()  into an array.

Here's working jQuery that takes a country name input and displays states in that country. Sorry the format is messy, but its a copy/paste problem. You can make the translation to your needs. It uses POST, which is better and more secure, but you can use GET.

        $('#state').autocomplete({
            source: function(request, response) {
                //Pass country to the php query manager to limit the state selection to just that country
                $.ajax({
                    url: '../phpFunctions/getState.php',
                    data: {
            term: request.term,
            country: $('input[name=country]:checked').val() //Pass the selected countryAbbreviation
          },
                    type: 'POST', // a jQuery ajax POST transmits in querystring format (key=value&key1=value1) in utf-8
                    dataType: 'json', //return data in json format
                    success: function(data) {
                        response($.map( data, function(item) {
                            return {
                label: item.stateName,
                value: item.name,
                abbrev: item.stateAbbrev
              };
                        }));
                    }
                });
            },

            select: function(event, ui) {
                $(this).val(ui.item.value);
                $('#hiddenState').val(ui.item.abbrev);  //set the state abbreviation
            }

Here is a working PHP  loop that pumps out JSON

    /* Retrieve the query results and store in an array. Specify a MySQL associative array with case sensitive field names.*/
        while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC))
        {
    /* In each row, pull stateNameInEnglish and stateProvinceAbbreviation. */            
            $row_array['stateName'] = $row['stateNameInEnglish']; 
            $row_array['name'] = $row['stateNameInEnglish'];
            $row_array['stateAbbrev'] = $row['stateProvinceAbbreviation'];
           
            array_push($return_arr,$row_array);
        }
}
/* Toss back state results as a json encoded array. */
  echo json_encode($return_arr);


Lastly, you should copy the JSON response from the server and paste it into jsonlint.com to validate that you get correct JSON format out of your server. Let me know if you need help to do that.  Incorrect format is unrecognizable to Autocomplete.

Mike thank you very much, this works, but it works the same as my first autocomplete function with select

What I intended to accomplish with ajax was the population of other fields (lets say state abbreviation and name) even if the user doesn't explicitly select the offered value.

Can I, instead of select, use some other trigger, is there something like on keyup?

If you want different specific data set, that can only be done in Autocomplete by the select: option.  When the user selects, you can set multiple things, as shown.  If the user mouses in but does not select anything, you can only detect the blur out, via mouseout, etc. and set some predefined thing from that event - essentially it would be a "user was here flag", but it could contain information that other parts of the web page have already collected, e.g., the W3C location latitude and longitude detection or whatever has already been inputted by the user.

so basically what you're saying is that I'm not able to do something like

   blur: function(event, ui) {
                $(this).val(ui.item.value);
                $('#hiddenState').val(ui.item.abbrev);  //set the state abbreviation
            }

Yes, you are correct. The only way to get a specific ui.item.value  out of the the dropdown list is by a user click, which create a select event in Autocomplete.  Here's the documentation.

http://api.jqueryui.com/autocomplete/#event-select

Thanks a lot Mike. since I'm already bugging you I'm going to ask another question - do you have any other suggestion how I could accomplish that if not with autocomplete?

Autocomplete is open source.  One option is to download the source file and 'hack' / modify the Autocomplete source code. I don't have the expertise to help you with that, but other folks here, like Jake, kbwood, and Adam do. You will need a very clear requirements statement, including a detailed written example of each step in the user - computer interaction.