jQuery autocomplete shows value instead of label

Question

I am using jQuery-ui autocomplete. Here is how i use it

<form action="go.php" method="post">
    <input id="txt" type="text" />
</form>

<script>
    $('#txt').autocomplete({
         source: [{'label': 'milan', 'value': '1'}, {'label': 'minos', 'value': '2'}]
    })
</script>

When i type 'mi', milan and minos shows up.No problem with that. However when i focus on them with down key value of #txt changes to 1(value for milan) instead of milan. How can i show milan when i focus on it. Thanks

Answer 1

Because the default behavior of the select event is to show the value not the label, so you need to simply:
- return false as "İsmail Hakkı Şen" mentioned earlier.
- or you can use event.preventDefault() to prevent the default action of the event from executing and then write down what you need to do as follows:

$('#txt').autocomplete({
     source: [{'label': 'milan', 'value': '1'}, {'label': 'minos', 'value': '2'}],
    focus: function( event, ui ) {
      event.preventDefault();
      $('#txt').val(ui.item.label);
    },
    select: function( event, ui ) {
     event.preventDefault();
     $('#txt').val(ui.item.label);
    }
});

Please refer to "Andrew Whitaker" answer in this post > Autocomplete applying value not label to textbox - as it is really helpful in understanding.

Answer 2

you has to tell your code on focus to do something.

$('#txt').autocomplete({
     source: [{'label': 'milan', 'value': '1'}, {'label': 'minos', 'value': '2'}],
    focus: function( event, ui ) {
      $(this).val(ui.item.label);
      return false;
    },
    select: function( event, ui ) {
     $(this).val(ui.item.label);
      return false;
    }
});