Jquery autofill for dynamically created forms

Question

Hi Guys I'm Trying to do autocomplete and autofill for dynamically created forms.Here by the reference link I came with static field of auto complete and autofill. But I need to achieve for dynamically created forms(add another/remove.).And here is the reference fiddle http://jsfiddle.net/q2kDU/

Here by the above fiddle. The label is autocomplete and the value is autofilled depending on the label's value.Here it is in static forms(Only one form). I need to achieve this in dynamically created forms(Add another/Remove).The auto Complete and autofill must be work on all dynamically added field. Please Help to solve this.I'm new to Jquery.Thanks In Advance.

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;
        }

    });
});

Ya Im trying that only . I'm new to javascript and jquery.I'm feeling tough to understand this.Can you please help me here.It will be very greatfull for me. Thank you so much — Ajay Kumar

Parasmani Batra Parasmani Batra · Accepted Answer · 2015-09-28T05:19:18

As you are explaining you gonna do that for multiple forms hence I recommend you do use classes instead of 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;
    }

});

Jquery autofill for dynamically created forms

1 Answers