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

jquery auto complete for dynamically generated textboxes

提问by

i am new to jquery, i am working on a web page which needs generating text boxes dynamically with autocompletefacility.

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

i tested $("#some").autocomplete(data);on some static content, it worked perfectly.

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

however, when i try the same technique with dynamically generated text boxes it's not working!

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

my code looks as follows:

我的代码如下所示：

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

thanks guys i am done with this with ur help.

谢谢你们，我在你的帮助下完成了这个。

now, another problem. i am loading the array(input to autocomplete) with a DWR call.as below

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

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

here problem is everytime making a DWR call to DB to get the array!

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

is there any way to store the array from DWR in a global variable?

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

regards

问候

采纳答案by Alistair Evans

The main issue i think is that you are calling the autocomplete outside of the click handler. So the autocompletion gets set up when the page loads, rather than when the button is clicked.

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

To resolve this, alter the code to read:

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

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

    });
});

Now the autocompletion is being set on each new item, rather than once, at the start.

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

回答by tvanfosson

You need to add the autocomplete handler to each element as you add it. The elements that don't exist when you apply it on document load will never have it applied otherwise. Also, you'd be better off creating the row and input separately. By doing that you could just use the reference to the newly created input and use it with the autocomplete plugin.

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

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

    });
});

回答by motorpod

The simplest way is to use:

最简单的方法是使用：

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

inside the javascript function who generates the new element.

在生成新元素的 javascript 函数中。

回答by karim79

Some thoughts:

一些想法：

• Where is counter initialized?
• Try leaving a space between the 'type' and 'name' attributes of your input tags, <input type='text' name='td_products... >, that mightbe preventing your startsWithattribute filter from matching anything.

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

回答by Steerpike

You're adding a new input when you click #button_newproductbut you're only adding the autocomplete once in the function, outside the click.

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

Check jquery live

检查 jquery实时