Autofocus function for tag-it
In the plugin tag - from https://github.com/aehlke/tag-it (demo - http://aehlke.github.com/tag-it/examples.html ) how can autofocus be added (i.e. if set to true, the first element will be automatically focused when the menu is displayed) in jquery-tag-it.js?
EDIT: The function should also enable or include a suggestion in the input field when the "Enter" key is pressed.
source to share
I was able to resolve the issue of typing a sentence with autofocus by doing some of the following in the tag-it.js file:
Defined a variable to get the value of the focused sentence on line 113 just after var that = this;
:
var that = this;
var focuse;
On line or after line 279 and the function, this.tagInput.keydown(function(event) {})
add the following:
.on( "autocompletefocus", function( event, ui ) {
focuse = ui.item.value;
})
Then finally, inside the function this.tagInput.keydown(function(event) {})
, replace that.createTag(that._cleanedInput());
with:
if (focuse !== '' && event.which === $.ui.keyCode.ENTER)
{
that.createTag(focuse);
focuse = '';
}
else
{
that.createTag(that._cleanedInput());
}
To enable autofocus, add the autocomplete ( autocomplete: {autoFocus: true}
) parameter to the file that calls the tagit plugin as:
$("#tags").tagit({
availableTags : availableTags,
autocomplete: {autoFocus: true}
});
source to share
Here's an example: http://jsfiddle.net/UQTY2/8/
Hope this is what you expect
$(document).ready(function(){
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").tagit({
availableTags : availableTags,
showAutocompleteOnFocus : true,
autocomplete: {delay: 0, minLength: 0, autoFocus: true},
});
});
source to share