javascript添加的textarea中需要自動完成

Question

在下面的代碼中，自動完成功能按預期在textarea中起作用。 但是單擊按鈕+程序后，它在添加的文本區域中不起作用

1. 我需要自動完成功能才能在使用該按鈕添加的所有文本區域上工作。 我該怎么做？

2. 現在，自動完成功能區分大小寫。 無論情況如何，如何使自動完成功能發生？
   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;
}));