jQuery自动完成动态生成文本框

Question

jQuery自动完成动态生成文本框

jquerydynamicautocomplete

14

我是jquery的新手，正在开发一个需要使用自动补全功能动态生成文本框的网页。

我在一些静态内容上测试了$("#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);
 }

这里的问题是每次都需要通过DWR调用数据库来获取数组！

是否有办法将从DWR获取的数组存储在全局变量中？

谢谢

- sangram

嘿，又一个。我正在使用DWR调用来填充一个数组：DwrService.populateProducts（someFunc）; function someFunc（result）{ autoProducts = result; 输入。自动完成（结果）; }问题是每次都要调用DWR函数！是否可以将DWR调用的结果存储在全局变量中？ - sangram

5个回答

5

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

$(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);

    });
});

- tvanfosson

非常感谢您，"您需要在添加每个元素时将自动完成处理程序添加到它上面"这句话对我帮助很大。非常感谢您。 - Mohammed Sufian

1

最简单的方法是使用：

。

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

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

- motorpod

1

一些想法：

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

- karim79

谢谢您的回复，我只是提供了一些示例代码，但所有这些东西在我的代码中都放置得很完美。 - sangram

@sangram - 我认为@Kazar已经发现了主要问题，请看他的回答。 - karim79

0

当您单击#button_newproduct时，您正在添加一个新的输入，但是您只在函数外部添加自动完成一次。

请检查jquery live。

- Steerpike

2

实时不适用于自动完成，它只适用于事件。 - Alistair Evans

1

当然，我真是太蠢了，由于某些原因，我全部都在点击上面纠结，而不是自动完成。 - Steerpike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alistair Evans · Accepted Answer

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

要解决此问题，请修改代码如下：

$(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);

    });
});

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