Jquery自动填充动态创建的表单

Question

大家好，我正在尝试对动态创建的表单进行自动完成和自动填充。这里通过参考链接，我提供了自动完成和自动填充的静态字段。但我需要实现动态创建的表单（添加另一个/删除。）。这里是参考小提琴http://jsfiddle.net/q2kDU/

这里是上面的小提琴。标签是自动完成的，值会根据标签的值自动填充。这里是静态形式（只有一种形式）。我需要在动态创建的表单中实现这一点（添加另一个/删除）。自动完成和自动填充必须适用于所有动态添加的字段。 请帮助解决这个问题。我是 Jquery 的新手。在此先感谢。

html

<label for="search">Search: </label>
<input id="search" />
<input id="searchval" />

js

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});
$(function() {
    var data = [
        {
        label: "anders",
        value: "1",
        category: ""},
    {
        label: "andreas",
        value: "2",
        category: ""},
    {
        label: "antal",
        value: "3",
        category: ""},
    {
        label: "annhhx10",
        value: "4",
        category: "Products"},
    {
        label: "annk K12",
        value: "5",
        category: "Products"},
    {
        label: "annttop C13",
        value: "6",
        category: "Products"},
    {
        label: "anders andersson",
        value: "7",
        category: "People"},
    {
        label: "andreas andersson",
        value: "8",
        category: "People"},
    {
        label: "andreas johnson",
        value: "9",
        category: "People"}
    ];

    $("#search").catcomplete({
        delay: 0,
        source: data,
        select: function(event, ui) {
            $('#search').val(ui.item.label);
            $('#searchval').val(ui.item.value);
            return false;
        },
        focus: function(event, ui) {
            $("#search").val(ui.item.label);
            return false;
        }

    });
});

Answer 1

正如您所解释的，您将对多种表单执行此操作，因此我建议您使用类而不是 id。

<input id="search" class="searchAuto" />
 $(".searchAuto").catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui) {
        $('#search').val(ui.item.label);
        $('#searchval').val(ui.item.value);
        return false;
    },
    focus: function(event, ui) {
        $("#search").val(ui.item.label);
        return false;
    }

});