Question

My case is simple. I have a container div. In it I have an input box called tagName. To this I have attached the autocomplete plugin (jquery.autocomplete.js). When the drop-down occurs, and either the keyboard or the mouse is used to select the choice of country, I capture the onSelect event and declare

    $('#tagName').autocomplete({
        lookup: countriesArray,
        onSelect: function () {
            $(this).parent().append($('<input/>', {
                value: '',
                type: 'text',
                name: 'paramName1',
                id: 'paramName1'
            }));
            $('#paramName1').focus();

Within the onSelect, I can apply autocomplete, but if I end this function, and then say

$(‘#paramName1’).autocomplete({
lookup: citiesArray,… etc

then autocomplete is not applied to paramName1.

I feel like this method of creating input textboxes is very inefficient. How can I create an input box and assign it an id dynamically? Additionally, the autocomplete plugin must work on the newly created input box. Thanks for looking.

PS: I imagine after that, adding a delete button on hover/focus, and extra functionality will be easier. This is my first jQuery project.

Answer 1

You have to call $('#paramName1').autocomplete({ lookup: citiesArray,... etc. inside the onSelect function. The reason why it dont work outside is because the element does not exist yet. So, the autocomplete cannot be applied.

And if you want the id dynamically, you can use a variable to set it.

Something like this:

$('#tagName').autocomplete({
        lookup: countriesArray,
        onSelect: function () {
            $(this).parent().append($('<input/>', {
                value: '',
                type: 'text',
                name: 'paramName1',
                id: myDinamicId
            }));
            $('#'+myDinamicId).autocomplete({ lookup: citiesArray,... etc.
            $('#'+myDinamicId).focus();

There’s a question that look a lot like yours. Check it out: jquery auto complete for dynamically generated textboxes