Cannot get autocomplete field value

Question

I have autocomplete field

$('.airport_field_destination').on('autocompleteselect', (event, ui) => {
  var id = Number($(this).attr('data-number'))

  $(`#search_legs_${id + 1}_origin_text`).val(ui.item.value);
  $(`#search_legs_${id + 1}_origin_id`).val(ui.item.id)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search[legs][0][destination_text]" id="search_legs_0_destination_text" value="London (LON), England" class="field-3 airport_field airport_field_destination ui-autocomplete-input" data-number="0" placeholder="Till" data-source="/autocomplete/destination/flight"
  data-id-element="#search_legs_0_destination_id" autocomplete="off">

But var id says NaN to me

Where is my trouble?

UPDATE

With event.target I'm able to get id. But ui.item.value show me undefined

Does it work if you try using `.data('number')` instead of `.attr('data-number')`? I have the feeling [`attr()` may not work with `data-*` attributes](https://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)) — Jonathan Lam, Apr 26 '18 at 14:09
Can you log `$(this).attr('data-number')` and tell me what you get? — Jonathan Lam, Apr 26 '18 at 14:12
I tried with your data and it still work http://jsfiddle.net/9kYES/89/ — Tan Duong, Apr 26 '18 at 14:20
Your solution works, with `event.target` I able to get id, but `ui.item.value` show me undefined@GeorgeBailey — Silco, Apr 26 '18 at 14:20
Did you change something in your code? I can also `console.log(ui.item.value)` http://jsfiddle.net/9kYES/92/ — Tan Duong, Apr 26 '18 at 14:25

score 1 · Answer 1 · answered Apr 26 '18 at 14:23

The this event is undefined, because the arrow function does not capture the context (it uses the outside this context). If you use the function(event, ui) { ... } event handler syntax, then you will get the correct this.

Otherwise, you can use event.target as an alternative to this if you want to get the correct element, as @GeorgeBailey suggests.

score 1 · Answer 2 · answered Apr 26 '18 at 14:29

You have two problems with your code. As you are using arrow function as callback on the event handler this is not here what you think.

So change this to event.target

Secondly, ui.item.value , I don't know what is this. But it looks like you are trying to get the value. So use $(ui).val() and that should work.

Your final script would look like something below

$('.airport_field_destination').on('autocompleteselect', (event, ui) => {
  var id = Number($(event.target).attr('data-number'))

  $(`#search_legs_${id + 1}_origin_text`).val($(ui).val());
  $(`#search_legs_${id + 1}_origin_id`).val($(ui).val());
});

score 0 · Answer 3 · answered Apr 26 '18 at 14:33

So here is answer, how to do this

Thank's to @GeorgeBailey suggests for id

I can do it like this event.target and use arrow functions or make it like this

$('.airport_field_destination').on('autocompleteselect', function(event, ui){
  var id = Number($(this).attr('data-number'))

For ui.item- ui not have value

Here is console_log of ui - {item: {…}}item: {type: 1, id: 6540382, fullname: "London (LON), England", name: "London", city: "London", …}__proto__: Object

So Here is full working code

$('.airport_field_destination').on('autocompleteselect', function(event, ui){
  var id = Number($(this).attr('data-number'))
  console.log(ui);
  $(`#search_legs_${id + 1}_origin_text`).val(ui.item.fullname);
  $(`#search_legs_${id + 1}_origin_id`).val(ui.item.id)
});

Cannot get autocomplete field value

3 Answers3