Question

我是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 call.as

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

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

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

问候

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

    });
});

现在，在每个新项目上设置自动完成，而不是在开始时设置一次。

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

    });
});

Answer 3

一些想法：

计数器初始化在哪里？
尝试在两者之间留一个空格 'type'和'name'属性输入标记<input type='text' name='td_products... >，可能阻止您的startsWith属性过滤器匹配任何内容。

Answer 4

最简单的方法是使用：

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

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

Answer 5

当您点击#button_newproduct时，您正在添加新的输入，但您只是在功能中添加了一次自动完成功能，而不是点击。

检查jquery live

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

5 个答案: