Im using http://aehlke.github.io/tag-it/ for tagging but I am having a hard time adding a value when the autocomplete comes up and you hit enter or tab. If I use my mouse I can easily select a value like so:
And click on the value it correctly selects it:
However if I use the enter key it only adds the tag based on the text I've typed so far... For instance, assume I wanted to add "tryme" as a tag so I start typing try and I use my cursor on my keyboard and select the value I want and I hit the enter key I end up like so:
Before:
Then I press enter, I get "try" instead of "tryme":
Here is my code:
var entityId = '<%=(int)Module.Company%>'; //parameter for web service.
$("#MainContent_txtTags").tagit({
singleField: true,
singleFieldDelimiter: " ",
autocomplete: ({
delay: 0,
minLength: 1,
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Code/WebServices/Tags.asmx/GetTags",
dataType: "json",
data: '{"entityId":"' + entityId + '","search":"' + request.term + '"}',
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item.TagName,
value: item.TagName
}
}));
}
});
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
search: function(event, ui) {
$(this).addClass('autocompleteloading');
// custom minLength
var term = extractLast(this.value);
//alert(term);
if (typeof(term) !== 'undefined') {
if (term.length < 1) {
return false;
}
}
return true;
},
select: function(event, ui) {
alert("hi");
},
focus: function() {
// prevent value inserted on focus
return false;
},
response: function() {
$(this).removeClass('autocompleteloading');
}
})
});
I tried playing with the select event but that only fires when I use the mouse. How can I handle the enter / tab key using this library?
Here's my edited code:
//tagging
//to clear
var entityId = '<%=(int)Module.Company%>'; //parameter for web service.
var availableTags = [];
$("#MainContent_txtTags").tagit({
singleField: true,
singleFieldDelimiter: " ",
autocomplete: ({
delay: 0,
minLength: 1,
// autoFocus: true,
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Code/WebServices/Tags.asmx/GetTags",
dataType: "json",
data: '{"entityId":"' + entityId + '","search":"' + request.term.toLowerCase() + '"}',
success: function (data) {
availableTags = [];
response($.map(data.d, function (item) {
availableTags.push(item);
return {
label: item.TagName,
value: item.TagName
}
}));
}
});
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
search: function(event, ui) {
$(this).addClass('autocompleteloading');
// custom minLength
var term = extractLast(this.value);
//alert(term);
if (typeof(term) !== 'undefined') {
if (term.length < 1) {
return false;
}
}
return true;
},
select: function(event, ui) {
},
focus: function() {
// prevent value inserted on focus
return false;
},
response: function() {
$(this).removeClass('autocompleteloading');
}
}),
beforeTagAdded: function (evt, ui) {
// If tag is incomplete..
if ($.inArray(ui.tagLabel, availableTags) == -1) {
var $tagdropdowns = $('body ul:last li a');
// Add the selected tag (if there) from dropdown.
var $activeTag = $tagdropdowns.filter(function () { return $(this).is(":hover") });
if ($activeTag.length) {
$(this).tagit("createTag", $activeTag.text());
// Otherwise add the first tag from the dropdown.
} else {
$(this).tagit("createTag", $tagdropdowns.first().text());
}
// Stop adding incomplete tag.
return false;
}
}
});
Ended up with this thank you Banana (the answerer from below):
//tagging
//to clear
var entityId = '<%=(int)Module.Company%>'; //parameter for web service.
var callBeforeTagAdded = true;
$("#MainContent_txtTags").tagit({
singleField: true,
singleFieldDelimiter: " ",
autocomplete: ({
delay: 0,
minLength: 1,
// autoFocus: true,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Code/WebServices/Tags.asmx/GetTags",
dataType: "json",
data: '{"entityId":"' + entityId + '","search":"' + request.term.toLowerCase() + '"}',
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.TagName,
value: item.TagName
}
}));
}
});
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
},
search: function (event, ui) {
$(this).addClass('autocompleteloading');
// custom minLength
var term = extractLast(this.value);
//alert(term);
if (typeof (term) !== 'undefined') {
if (term.length < 1) {
return false;
}
}
return true;
},
response: function () {
$(this).removeClass('autocompleteloading');
}
}),
beforeTagAdded: function (evt, ui) {
// If tag is incomplete.
var $tagdropdowns = $('body ul:last li a');
// Add the selected tag (if there) from dropdown.
var $activeTag = $tagdropdowns.filter(function () {
return $(this).hasClass("ui-state-focus");
});
$tagdropdowns.removeClass('ui-state-focus');
if ($activeTag.length && callBeforeTagAdded) {
$("#MainContent_txtTags").tagit("createTag", $activeTag.text());
callBeforeTagAdded = false;
return false;
// Otherwise add the first tag from the dropdown.
} else {
callBeforeTagAdded = true;
}
}
});
