CODEWITHSUNDEEP
jquery-uiautocomplete
BaronGrivet
BaronGrivet

Reputation: 4424

How to add appendTo option to jQuery-UI autocomplete widget

I'm working on an old project that uses the following code as a base for an autocomplete text field: https://jqueryui.com/autocomplete/#categories

 $( function() {
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
      _create: function() {
        this._super();
        this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
      },
      _renderMenu: function( ul, items ) {

I would like to add the "appendTo" option to this widget but can't work out the correct syntax from the API documentation:

Initialize the autocomplete with the appendTo option specified:

$( ".selector" ).autocomplete({
  appendTo: "#someElem"
});

Get or set the appendTo option, after initialization:

// Getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );

// Setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );

How do I add this option to a jQuery UI autocomplete widget?

Upvotes: 1

Views: 5315

Answers (1)

Sablefoste
Sablefoste

Reputation: 4192

You seemed to miss the end of the example source script (in your documentation link). It activates the autocomplete with:

$( "#search" ).catcomplete({
  delay: 0,
  source: data
});

To use the appendTo, then is as simple as:

$( "#search" ).catcomplete({
  delay: 0,
  source: data,
  appendTo: '#someElem'
});

where you are appending to a selection $('#someElem')

Upvotes: 1

Related Questions