tag-it 的自动对焦功能答案

【问题标题】：Auto-focus feature for tag-ittag-it 的自动对焦功能
【发布时间】：2013-01-28 14:17:11
【问题描述】：

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

编辑：该功能还应该能够在按下“回车键”时使建议被输入或出现在输入框中。

【问题讨论】：

您的意思是使用“单输入字段”示例显示并选择了第一个可用建议吗？
是的，我的意思是应该突出显示第一个可用的建议。

标签： jquery-ui list menu autofocus

【解决方案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}
});

【讨论】：

【解决方案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},
});
});

【讨论】：