Question

I have some very simple code.

Ok the issue is as such, we have a input field, and use jquery autocomplete. We also have on this field keyup function. The idea is that as the user types into this field, further down page, we echo what they are typing.

So if they were to type apple, in another div a span is updated live with word apple. However, we also on this input fire autocomplete using jquery api. So the problem occurs, that is they type:

app and select from autocomplete apple. The keyup has only registered the letters they typed, and so echoes app.

My code for the keyup is as follows:

//business suburb
$("#suburb").keyup(function() 
{
var suburb=$(this).val();
$(".adburb").html(suburb);
return false;
});

Input id is suburb

Preview code is as follows:

<li class="fixed">Suburb:
  <span class="overBit">
   <span id='title' class="adburb">Your Suburb</span>
  </span>
</li>

So my question is, how can I bind the selected autocomplete value as if it was completely typed by user ?

Answer 1

wack this in somewhere to fire the autocomplete select callback

    $( "#suburb" ).on( "autocompleteselect", function( event, ui ) {
      $(".adburb").html($("#suburb").val());
    } );