Maniram Maniram - 4 months ago 23
jQuery Question

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

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:
enter image description here

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

Hey you can achieve your stuff like below code:

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

Try this option...

Comments