Question

I am using Jquery autocomplete dynamically textbox. this is working fine but not working with on the fly element. Any suggestions?

My code

   $('input#ISBN').each(function () {
        $(this).autocomplete({
            source: '/Cataloging/Bib/GetISBN',
            minLength: 1,
            maxRows: 5,
            select: function (event, ui) {

            }

        });
    });

Answer 1

You need to recall your code after your element has been added to the DOM.

As you are using an ID selector, my guess is you are only using this for one element, and therefore don’t need a loop. If this is for multiple elements, change your ID into a class, and change the selector to:

$('input.ISBN')

Your code should be something like this:

function autoComp(element){
  element.autocomplete({
            source: '/Cataloging/Bib/GetISBN',
            minLength: 1,
            maxRows: 5,
            select: function (event, ui) {

            }

  });
}

$(function(){
    $('input#ISBN').each(function () {
       autoComp($(this));
    });
});

Then whereever you are dynamically adding the element:

//Element added here
//e.g:
$(".foobar").append(newElement);

autoComp(newElement);