自动完成需要在javascript添加textarea

auto-complete needed in javascript added textarea

本文关键字：javascript 添加 textarea      更新时间：2023-09-26

在下面的代码中，自动完成工作，因为它应该在文本区域。但它不工作，在添加的文本区域点击按钮+过程

  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

添加新元素时:

$(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不会为你做这些

解决这里区分大小写的问题

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;
}));
相关文章：