jQuery UI Autocomplete input value substring

Question

I'm using jQuery UI Autocomplete. I want substring text in input box when value is very long.

For example

var availableTags = [ "value long long long long", "value" ];

$( ".chooseGiftWrapper input#tags" ).autocomplete({
    source: availableTags,
    minLength: 0,
    open: function(event, ui) {
        $('.ui-menu').width(200).css({'position':'static','top': '0'});
        $('#chooseGiftWrapperHead .listFriends').show().addClass('open');
        nameFriendPosition();
         $('.listFriendsWrapper.scroll').jScrollPane({autoReinitialise: true});
    },
    select: function(event, ui) {

        $('#chooseGiftWrapperHead .chooseGiftcloseBtn').addClass('active');
        $('.dropDownBlock.listFriends').hide().removeClass('open');

    },
    focus: function(event, ui) {
        var default_value = $(this).attr('default_value');
        if ($(this).val() == default_value) {
            $(this).val('');
            $(this).removeClass('set_default');
            $('#chooseGiftWrapperHead .chooseGiftcloseBtn').removeClass('active');
        } 


    },
    change: function(event, ui) {

    }
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li />")
        .data("item.autocomplete", item)
        .append("<a><img src='img/testAvatar.png'><p class='nameFriend'>" + item.label + "</p></a>")                                
        .appendTo(ul);
}

But select event doesn't work for me.

Answer 1

I found a solution to the problem

select: function(event, ui) {
            name = ui.item.value;
            lengthName = name.length;
            substrName = '';
            if( lengthName > 23){
                ui.item.value = name.substr(0,23) + '...';
            } else {
                ui.item.value = name;
            }
            $(this).val(ui.item.value);


            $('#chooseGiftWrapperHead .chooseGiftcloseBtn').addClass('active');
            $('.dropDownBlock.listFriends').hide().removeClass('open');

        },