代码之家 › 专栏 › 技术社区 › adl

javascript添加的文本区域需要自动完成

jquery-autocomplete jquery javascript

0

adl · 技术社区 · 9 年前

在下面的代码中,自动完成正在按照文本区域中的预期工作。但点击按钮+程序后,它在添加的文本区域中不起作用

我需要自动完成以处理使用按钮添加的所有文本区域。我该怎么做?

现在,自动完成区分大小写。如何使自动完成发生而不管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

2 回复 | 直到 9 年前

1

2

David 9 年前

添加新元素时:

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

2

1

adl 9 年前

在此解决区分大小写的问题

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