jquery ui autocomplete input select value

Question

I use jquery autocomplete to search in a xml file.

The autocomplete function works fine. However, when I click on an element item of autocomplete menu result , the value put inside the input search box is not visible. Because there are a lot's of blank spaces (tab) that are added in the input box.

I really don't understand where it comes from (this blank spaces).

I made a fiddle, however on this fiddle the value is correctly place inside the input box...they aren't this blank space: http://jsfiddle.net/8zJkS/5/

script :

$("input#search").autocomplete({
        minLength: 3,
        source: myArr,
        response: function(event, ui) {
        if (ui.content.length === 0) {
            $("#noMatches").show();
        } else {
            $("#noMatches").hide();
        }
        },
        focus: function (event, ui) {
            $('input#search').focus();
            return false;
        },
        select: function (event, ui) {
            $("input#search").val(ui.item.value);
            return false;
        }
    });

By the way, I also search the way to have the hover effect also with keyboard. I have also some text that appear when i search and I don't know how to remove it.

It seems that jquery autocomplete documentation is very poor.

Sorry for my English, I'm french.

Answer 1

I solved my problem with this :

select: function(event, ui){
            if (ui.item && ui.item.value){
                titleinput = ui.item.value;
                ui.item.value= $.trim(titleinput);
            } 
        }