jquery autocomplete for dynamically generated textboxes

Question

I'm new to jquery, I'm working on a web page which needs generating text boxes dynamically with autocomplete facility. I don't know how bind event with generated textbox. my code looks as follows:

 $(document).ready(function () {

    var counter = 1;

    $(".addButton").live("click", function () {

        var newTextBoxDiv = $(document.createElement('div'))
  .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.html('<TABLE><TR><TD>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;</TD></TR></TABLE>');

        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });
});

and post query

function fillTextBox(text) {
    $.ajax(
        {
            type: 'POST',
            url: '@Url.Action("_AutoCompleteAjaxLoading", "CommandEntity")',
            async: true,
            data: { text: text},
            dataType: "json",
            traditional: true,
            success: function(data) {
                //what I should do here?
            },
            error: function(xhr, ajaxOptions, thrownError) {

            }
        });
}

I don't really get what you're trying to achieve in the first code block. You bind click on a ".addButton" element and you create that element in the handler... Also, what does return the ajax request ? What is the relation between those two blocks of code ? — Didier Ghys, Feb 27 '12 at 11:25
ajax request return collection List. I need bind function fillTextBox with generated text box. fillTextBox calling when user start typing — user571874, Feb 27 '12 at 11:26
there is a similar thread http://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element — PraveenLearnsEveryday, Feb 27 '12 at 11:28

score 3 · Accepted Answer · answered Feb 27 '12 at 14:00

You could use the jquery ui autocomplete plugin:

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult _AutoCompleteAjaxLoading(string term)
    {
        var data = new[] { "item 1", "item 2", "item 3" };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

View:

<script type="text/javascript">
    $(function () {
        setupAutoComplete();
        var counter = 2;
        $('#TextBoxesGroup').delegate('a.addButton', 'click', function (evt) {
            evt.preventDefault();
            $('<table/>', {
                html: $('<tr/>', {
                    html: $('<td/>', {
                        html: $('<input/>', {
                            type: 'text',
                            id: 'textbox' + counter,
                            name: 'textbox' + counter
                        })
                    }).after($('<td/>', {
                        html: $('<a/>', {
                            href: '#',
                            'class': 'addButton',
                            text: 'Add'
                        })
                    }))
                })
            }).appendTo('#TextBoxesGroup');
            setupAutoComplete();
            counter++;
        });
    });

    var setupAutoComplete = function () {
        $(':text[name^="textbox"]').autocomplete({
            source: '@Url.Action("_AutoCompleteAjaxLoading")',
            minLength: 2,
            select: function (event, ui) {

            }
        });
    };
</script>

<div id="TextBoxesGroup">
    <table>
        <tr>
            <td>
                <input type="text" name="textbox1" id="textbox1" value="" />
            </td>
            <td>
                <a href="#" class="addButton">Add</a>
            </td>
        </tr>
    </table>
</div>

score 1 · Answer 2 · answered Feb 27 '12 at 11:32

1

Im not really sure what do you need either. Try adding a line like

$('#textbox' + counter).keypress( function(){
  // here trigger autocomplete event
} )

Or

 $('#textbox' + counter).keypress( fillTextBox( $(this).val() ) )

answered Feb 27 '12 at 11:32

Oriesok Vlassky

797
1
13
26

jquery autocomplete for dynamically generated textboxes

2 Answers2