jQuery UI Autocomplete Responce Data

Question

I am having some trouble accessing the JSON data provided by a script for an autocomplete box, and was wondering if anybody could help.

This is the Javascirpt code which deals with the autocomplete box:

$(function() {
             $("#student_search").autocomplete({
                  source: "functions/find_student.php",
                  delay: 100,
                  minLength: 1,
                  select: function(event, ui) {

                      student_result = ui;

                      $('#student_search').val(student_result[0].label);
                      highlightStudent(student_result.label, student_result.value.id, student_result.value.house);
                  }
            }); 
         });

And an example of the response is:

[{"label":"larry winkles","value":{"id":1,"house":"s"}}]

I am struggling to find out how to access that data when it gets sent back to the success part of the autocomplete code. Specifically when I click on the name, the error I get is:

Uncaught TypeError: Cannot read property 'label' of undefined

Thanks for any help.

Alex

Answer 1

I have a doubt about the nature of the ui variable, may be you can check it by using console.info(ui) if you were on Firefox.

I suppose that the problem is in line :

highlightStudent(student_result.label, student_result.value.id, student_result.value.house);

replace :

student_result

by :

student_result[0]

Answer 2

Have you tried like this :

select: function(event, ui) {
   var label = ui.item.label;
   var value = ui.item.value;
}

Let me know for any concerns.