CODEWITHSUNDEEP
jquery-uilistmenuautofocus
Javier Brooklyn
Javier Brooklyn

Reputation: 634

Auto-focus feature for tag-it

In the plugin tag-it from https://github.com/aehlke/tag-it (demo - http://aehlke.github.com/tag-it/examples.html), how is it possible to add the autofocus (i.e If set to true the first item will automatically be focused when the menu is shown) feature in the jquery - tag-it.js?

EDIT: The feature should also enable the suggestion to be inputted or made appear in the input box when 'Enter key' is hit.

Upvotes: 3

Views: 1140

Answers (2)

Javier Brooklyn
Javier Brooklyn

Reputation: 634

I was able to solve the problem of entering the auto-focused suggestion by making some of the following in the tag-it.js file:

Defined a variable for receiving the value of focused suggestion on line 113 just after var that = this;:

var that = this;
var focuse;

On or after line 279 and function - this.tagInput.keydown(function(event) {}), the following has to be added:

.on( "autocompletefocus", function( event, ui ) {

focuse = ui.item.value;

})

Then finally within 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 to autofocus, add the autocomplete (autocomplete: {autoFocus: true}) option in the file that calls the tagit plugin as:

$("#tags").tagit({
availableTags : availableTags,
autocomplete: {autoFocus: true}
});

Upvotes: 1

sdespont
sdespont

Reputation: 14025

Here is an example : http://jsfiddle.net/UQTY2/8/

I hope that is what you are expecting

$(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},
});
});

Upvotes: 0

Related Questions