change selected item in autocomplete

Question

I have an input-field configured with jQuery autocomplete. The autocomplete works fine and the values are displayed fine. Imagine when I enter "hello" in the input field, autocomplete displays a list with: "hello john", "hello mary", "hello xyz". When I select one of the displayed options ,"hello john" for instance, usually "hello john" would be displayed in the input field. But I want to modify that string so that only "john" is displayed. When I try to do this in the select event, setting the input with $(this).val("john"); it doesn't work.

EDIT:

As I experienced, the input value changes for a small period of time (time between the $(this).val(hotel); call and the the end of the select part). Then it's overwritten by the original value proposed by the autocomplete.

Answer 1

$( ".selector" ).autocomplete({
  select: function( event, ui ) {

  //// do here
  ////write /////
   return false;//// in last line
}
});

as per doumentation http://api.jqueryui.com/autocomplete/#event-select

Answer 2

fiddle:

http://jsfiddle.net/8ptJv/1/

html:

<input type="text" id="tags"/>

jquery:

$(function() {
    var availableTags = [
      "Hello John",
      "Hello tommy",
      "Hello Mary",
    ];
    $("#tags").autocomplete({
      source: availableTags,
        select: function(event, ui) {
            $(this).val(ui.item.value.replace("Hello ",""));
            return false;
        }
    });
  });