Keep first five characters and truncate the other characters in autocomplete?

Question

I have an autocomplete textbox with multiple tokens. I wanted to check the first five entered characters to match and truncate the other characters.

Please find my UI screen below:

Actually I have customized the fcbk complete plug-in with shift + arrow key to do multiselect functionality to select multiple items at one stretch.

I wanted to check first five characters to match and truncate the other characters only...

My code below:

 var addItem = function(item, preadded){
    console.log(item);
    if(item.length > 1)
    {

        for (var i=0;i<item.length;i++)
        {
            var title = $(item[i]).text();
            console.log('Title = ' + title);
            var value = ($(item[i]).attr('rel') && $(item[i]).attr('rel') != -1 ? $(item[i]).attr('rel') : title);
            var li = document.createElement('li');
            var txt = document.createTextNode(title);
            var aclose = document.createElement('a');
            var input = addHiddenInput(value);
            $(li).attr({
                'class': 'bit-box'
            });
            $(li).prepend(txt);
            $(aclose).attr({
                'class': 'closebutton',
                'href': '#'
            });
            li.appendChild(aclose);
            li.appendChild(input);
            holder.appendChild(li);
            $(aclose).click(function(){
                $(this).parent('li').fadeOut('fast', function(){
                    $(this).remove();
                });
                return false;
            });
             item[i].remove();
        }
    }
    else
    {

    console.log(item);
    var title = item.text();
    console.log('title = ' + title);
    var value = (item.attr('rel') && item.attr('rel') != -1 ? item.attr('rel') : title);
    var li = document.createElement('li');
    var txt = document.createTextNode(title);
    var aclose = document.createElement('a');
    var input = addHiddenInput(value);
    $(li).attr({
        'class': 'bit-box'
    });
    $(li).prepend(txt);
    $(aclose).attr({
        'class': 'closebutton',
        'href': '#'
    });
    li.appendChild(aclose);
    li.appendChild(input);
    holder.appendChild(li);
    $(aclose).click(function(){
        $(this).parent('li').fadeOut('fast', function(){
            $(this).remove();
        });
        return false;
    });
     }
    if (!preadded) {
        holder.removeChild(document.getElementById(elem[0].id));
        addInput(elem);
    }
     if(!controlKeyPressed){
    feed.hide();
}
item.remove();
}

This is my addItem function with mutiselect value getting added to autocomplete textbox with tokens.

My Expected Output:

Manuel...

Any help on this?

Answer 1

Hey you can achieve your stuff like below code:

    txt.substr(0, txt.length - 1);
    $(li).html(txt + "...");

Try this option...