How do you bind jQuery UI autocomplete using .on()?

by

If I understood correctly, your problem looks very similar to one I saw in another topic. I’ll adapt my answer to your case, let’s see if it solves your problem:

$(document).on("focus",[selector],function(e) {
    if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
        $(this).autocomplete({             //   call it
            source:['abc','ade','afg']     //     passing some parameters
        });
    }
});

Working example at jsFiddle. I used focus instead of keydown because I need to re-trigger the event, and I don’t know how to do it with key/mouse events.

Update: You could also consider using clone, if your additional inputs will have the same autocomplete as an existing one:

var count = 0;
$(cloneButton).click(function() {
    var newid = "cloned_" + (count++); // Generates a unique id
    var clone = $(source) // the input with autocomplete your want to clone
        .clone()
        .attr("id",newid) // Must give a new id with clone
        .val("") // Clear the value (optional)
        .appendTo(target);
});

See the updated fiddle. There are also jQuery template plugins that might make this solution easier (although I haven’t used one myself yet, so I can’t talk from experience).

More Related Contents:

  1. twitter bootstrap typeahead ajax example
  2. Detecting no results on jQuery UI autocomplete
  3. jQuery UI Autocomplete widget search configuration
  4. jQuery UI autocomplete with JSON
  5. What does autocomplete request/server response look like?
  6. Autocomplete issue into bootstrap modal
  7. How do you trigger autocomplete “select” event manually in jQueryUI?
  8. How can I add jquery ui autocomplete to a dynamically created element?
  9. Sorting Autocomplete UI Results based on match location
  10. jQuery UI Autocomplete – menu disappears on hover
  11. Jquery UI Autocomplete: search from multiple attributes of one array
  12. Why am I getting an OPTIONS request instead of a GET request?
  13. jQuery .data() does not work, but .attr() does
  14. How to detect if two divs touch with jquery?
  15. jquery save json data object in cookie
  16. What’s the difference between jQuery’s replaceWith() and html()?
  17. JavaScript: Changing src-attribute of a embed-tag
  18. jQuery: keyPress Backspace won’t fire?
  19. jquery, add/remove class when window width changes
  20. How to call .ajaxStart() on specific ajax calls
  21. jquery ajax problem in chrome
  22. JQuery: Build HTML in ‘memory’ rather than DOM
  23. Accessing cross-domain style sheet with .cssRules
  24. How do I get a jQuery selector’s expression as text?
  25. Remove span tag in string using jquery
  26. jquery get height of iframe content when loaded
  27. How do you create a toggle button?
  28. How to remove only one style property with jQuery?
  29. jQuery mobile- For every live tap event should there be an equivalent click event?
  30. How to trigger jquery Resizable resize programmatically?

Leave a Comment