jquery自动完成动态生成的文本框答案

【问题标题】：jquery auto complete for dynamically generated textboxesjquery自动完成动态生成的文本框
【发布时间】：2014-01-17 22:50:00
【问题描述】：

我是 jquery 的新手，我正在开发一个需要使用 autocomplete 工具动态生成文本框的网页。

我在一些静态内容上测试了$("#some").autocomplete(data);，效果很好。

但是，当我使用动态生成的文本框尝试相同的技术时，它不起作用！

我的代码如下：

$(function() {  

  $("#button_newproduct").click(function(){  
    $("#products_table > tbody").append(
      "<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>");
  });
  var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" ");
  $('input[name^=td_products]').autocomplete(data);
});

谢谢大家，在你们的帮助下我已经完成了。

现在，另一个问题。我正在使用 DWR 调用加载数组（输入到自动完成）。如下

DwrService.populateProducts(someFunc);
function someFunc(result){
    autoProducts=result;
    input.autocomplete(result);
 }

这里的问题是每次都对 DB 进行 DWR 调用以获取数组！

有没有办法将 DWR 中的数组存储在全局变量中？

问候

【问题讨论】：

嘿，另一个我正在使用 dwr 调用来填充数组：DwrService.populateProducts(someFunc);函数 someFunc(result){ autoProducts=result;输入。自动完成（结果）；问题是每次调用 dwr 函数！是否可以将 dwr 调用结果存储在全局变量中？

标签： jquery dynamic autocomplete

【解决方案1】：

我认为主要问题是您在点击处理程序之外调用自动完成功能。因此，在页面加载时设置自动完成，而不是在单击按钮时设置。

要解决此问题，请将代码更改为：

$(function() {

    $("#button_newproduct").click(function() {

        var newItem = $("<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>");

        $("#products_table > tbody").append(newItem); 

        var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
        newItem.find('input').autocomplete(data);

    });
});

现在每个新项目都设置了自动完成功能，而不是一开始就设置一次。

【讨论】：

我不确定这是整个问题（karim79关于空格的观点也很重要），但这绝对是一个关键问题。调用 autocomplete 时，需要自动完成的元素不存在，因为没有发生点击来创建它。
如果输入元素确实被添加到页面中，那么空格就不是问题了吗？
太棒了，工作完美，即使我是堆栈溢出的新手，我也对回复的速度感到惊讶，非常感谢。
谢谢，你们所有人，我刚刚发布了一些示例代码，所有这些元素都很好地放置在实际代码中。

【解决方案2】：

您需要在添加每个元素时为其添加自动完成处理程序。当您在文档加载时应用它时不存在的元素将永远不会应用它。此外，您最好分别创建行和输入。通过这样做，您可以只使用对新创建输入的引用并将其与自动完成插件一起使用。

$(function() {  

    $("#button_newproduct").click(function(){
         var input = $("<input type='text' name='td_products["+counter+"]' />");
         var row = $('<tr />').append( $('<td />').append(input) );  
         $("#products_table > tbody").append(row);
         var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" ");
         input.autocomplete(data);

    });
});

【讨论】：

非常感谢先生，You need to add the autocomplete handler to each element as you add it. 这行对我帮助很大.. 非常感谢..

【解决方案3】：

一些想法：

计数器在哪里初始化？
尝试在您的“类型”和“名称”属性输入标签<input type='text' name='td_products... >，可能会阻止您的startsWith 属性过滤器匹配任何内容。

【讨论】：

感谢repla，我刚刚给出了一些示例代码，但所有这些东西都完美地放在了我的代码中
@sangram - 我认为@Kazar 发现了主要问题，请参阅他的回答。

【解决方案4】：

最简单的方法是使用：

$( ".some" ).autocomplete({source: data});

在生成新元素的 javascript 函数内部。

【讨论】：

【解决方案5】：

当您单击 #button_newproduct 时，您添加了一个新输入，但您只在函数中添加了一次自动完成功能，在点击之外。

查看jquerylive

【讨论】：

Live 不适用于自动完成功能，它仅适用于事件。
啊，当然，呵呵，不知什么原因，我全都被“点击”而不是自动完成所吸引。