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

Question

In the code below the auto-complete is working as it is supposed to in the textarea. But it does not work in the added textarea upon click on button +procedure

1. I need the auto-complete to work on all textarea added using the button. How can I do it?

2. Right now the auto-complete is case sensitive. How do I make the auto-complete to happen regardless of 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

When you add a new element:

$(t).appendTo(procdDiv);

Initializing the auto-complete plugin would be exactly like it is with any other element:

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

Rather than copy/paste the entire initialization, you might extract it into a function that can be invoked where needed and you'd supply that function with the target element(s). Or even just put the plugin options in a variable:

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 + ' ';
  }
}];

Then just call it repeatedly with those options:

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

and later...

$(t).textcomplete(textCompleteOptions);

The point, though, is that any time you want to initialize the plugin on a given textarea you need to invoke the plugin initializer. jQuery isn't going to do that for you.

Answer 2

Solves The Case-Sensitive issue here

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;
}));