Question

在插件标签中 - 来自https://github.com/aehlke/tag-it（演示 - http://aehlke.github.com/tag-it/examples.html），如何添加自动对焦（即如果设置为true，当菜单为时，第一个项目将自动聚焦显示）jquery中的功能 - tag-it.js？

编辑：当点击“输入键”时，该功能还应启用输入或显示在输入框中的建议。

Answer 1

我能够通过在tag-it.js文件中添加以下内容来解决输入自动聚焦建议的问题：

在var that = this;之后定义了一个变量，用于在第113行接收重点建议的值：

var that = this;
var focuse;

在第279行或功能 - this.tagInput.keydown(function(event) {})之后或之后，必须添加以下内容：

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

focuse = ui.item.value;

})

然后最终在函数this.tagInput.keydown(function(event) {})中，将that.createTag(that._cleanedInput());替换为：

if (focuse !== '' && event.which === $.ui.keyCode.ENTER)
{
that.createTag(focuse);
focuse = '';
}
else
{
that.createTag(that._cleanedInput());
}

要启用自动对焦，请在调用tagit插件的文件中添加自动完成（autocomplete: {autoFocus: true}）选项：

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

Answer 2

以下是一个示例：http://jsfiddle.net/UQTY2/8/

我希望这就是你所期待的

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

标签的自动对焦功能

2 个答案: