jQuery Autocomplete: [Object object] showing instead of value

Question

I am using jQuery UI autocomplete to select a value from a database. Everything about this is working just fine, with one exception. For the life of me, I cannot get the textbox I am writing the search value in to display the actual value after I have selected it.

I have read people having this problem many times, however the solutions they are presented are not working for me.

The fiddle is here: https://jsfiddle.net/p8y7111p/

The autocomplete code is:

$("#student_search").autocomplete({
  source: "functions/find_student.php",
  delay: 50,
  minLength: 3,
  select: function(event, ui) {
    var name_person = ui.item.label; // this works to give me the name of the person
    var house = ui.item.value.house;
    var id = ui.item.value.id;
    highlightStudent(name_person, id, house);
    $('#student_search').val(name);
  }
});

Note that I have tried:

replacing name with ui.label.value
trying adding a close or change property to autocomplete, with $('#student_search').val(name) as its value
placing the $('#student_search').val(name) outside of the autocomplete

I literally cannot think of anywhere else to put stuff, and so I turn to you all.

Thank you! Alex

Your fiddle doesn't work - could you recreate a workable version that produces your error? — Nick Zuber
– Nick Zuber, Commented Jan 10, 2016 at 10:17
You've not defined anything for the close attribute in the fiddle, which is why there's an error. Either remove the attribute or define a function. — Yass
– Yass, Commented Jan 10, 2016 at 10:22
This is the kind of response I am getting: {"item":{"label":"Alexander Bunting","value":{"id":6,"house":"s"}}} Everything that collects values from the response is working, it is literally only that one box that is not using the value correctly. ui.item.label is absolutele returning "Alexander Bunting". name is name_person, they are the same value - my code snipped above does not show this but they have the same value and type. The close attribute is still there by accident, from when I was trying anything to get it to work. It still returns object object without it. — Bogomip
– Bogomip, Commented Jan 10, 2016 at 12:47

rhitz · Accepted Answer · 2016-01-11 12:56:14Z

2

Have you tried event.preventDefault();?

The default behavior of the select event is to update the input with ui.item.value. This code runs after your event handler.

Simply prevent the default action on select and focus(not done here) using event.preventDefault() or by return false and it will work fine.

$("#student_search").autocomplete({
  source: "functions/find_student.php",
  delay: 50,
  minLength: 3,
  select: function(event, ui) {
    event.preventDefault();
    var name_person = ui.item.label; 
    var house = ui.item.value.house;
    var id = ui.item.value.id;
    highlightStudent(name_person, id, house);
    $('#student_search').val(name_person);
  }
});

Here is a working solution : FIDDLE

edited Jan 11, 2016 at 12:56

answered Jan 10, 2016 at 19:13

rhitz

1,8922 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Enrico Over a year ago

I'm still getting the [object object] when doing a keydown on the items in the dropdown. Any idea?

Collectives™ on Stack Overflow

jQuery Autocomplete: [Object object] showing instead of value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related