Question

在下面的代码中，自动完成功能在textarea中应该正常工作。但是点击按钮+过程

后，它在添加的textarea中不起作用

我需要自动完成才能使用按钮添加所有textarea。我该怎么办？

现在自动完成区分大小写。无论CASE如何，如何使自动完成？
HTML：

<div id="p_procedures">
      <textarea rows=5 cols=50>
</textarea>
</div><a href="#" id="addProcd">+ Procedure</a>

JS：

  $('textarea').textcomplete([{
  match: /(^|\s)(\w{2,})$/,
  search: function (term, callback) {
    var words = ['google', 'facebook', 'GITHUB', 'microsoft', 'yahoo'];
    callback($.map(words, function (word) {
        return word.indexOf(term) === 0 ? word : null;
    }));
 },
replace: function (word) {
    return word + ' ';
}
}]);


 var procdDiv = $('#p_procedures');
 var i = $('#p_equipments p').size() + 2;



  $('#addProcd').on('click', function(){
        var t ='<textarea rows=5 cols=50></textarea>';
        $(t).appendTo(procdDiv);

        p++;
        return false;
    });

JSFiddle

Answer 1

添加新元素时：

$(t).appendTo(procdDiv);

初始化自动完成插件与其他任何元素完全相同：

$(t).textcomplete({ ...options... });

不是复制/粘贴整个初始化，而是可以将其提取到可以在需要的地方调用的函数中，并且您将该函数与目标元素一起提供。或者甚至只是将插件选项放在变量中：

var textCompleteOptions = [{
  match: /(^|\s)(\w{2,})$/,
  search: function (term, callback) {
    var words = ['google', 'facebook', 'GITHUB', 'microsoft', 'yahoo'];
    callback($.map(words, function (word) {
        return word.indexOf(term) === 0 ? word : null;
    }));
  },
  replace: function (word) {
    return word + ' ';
  }
}];

然后用这些选项重复调用它：

$('textarea').textcomplete(textCompleteOptions);

以后......

$(t).textcomplete(textCompleteOptions);

但重点是，无论何时想要在给定的textarea上初始化插件，都需要调用插件初始化程序。 jQuery不会为你做那件事。

Answer 2

解决案例敏感问题

search: function (term, callback) {
var words = ['google', 'facebook', 'GITHUB', 'microsoft', 'yahoo'];
callback($.map(words, function (word) {
    return word.toLowerCase().indexOf(term.toLowerCase()) === 0 ? word : null;
}));

在javascript中添加textarea需要自动完成

2 个答案: