Skip to content
This repository has been archived by the owner on Jul 2, 2018. It is now read-only.

Added an option to use custom container for autocomplete #51

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions doc/jquery.autocomplete.txt
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,13 @@ useDelimiter (default value: false)
comma. For example, you may want to allow the user to enter a comma separated list of values--and
each value will autocomplete without erasing the other delimited values in the input field.

resultsContainer (default value: null)
HTML element which will contain autocomplete. It will be created and appended to body if not provided.
Contains of this element is replaced with new autocomplete elements each time autocomplete shows up.

autoPosition (default value: true)
Whether to position container of autocomplete automatically or not. If set to true, it will be aligned
right under input.

More advanced options :
=======================
Expand Down
32 changes: 21 additions & 11 deletions src/jquery.autocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@
useDelimiter: false,
delimiterChar: ',',
delimiterKeyCode: 188,
processData: null
processData: null,
autoPosition: true
};

/**
Expand Down Expand Up @@ -311,13 +312,20 @@
*/
this.dom.$elem.attr('autocomplete', 'off').addClass(this.options.inputClass);

/**
* Create DOM element to hold results, and force absolute position
*/
this.dom.$results = $('<div></div>').hide().addClass(this.options.resultsClass).css({
position: 'absolute'
});
$('body').append(this.dom.$results);
if (this.options.resultsContainer) {
/**
* Assume that container is already in DOM
*/
this.dom.$results = $(this.options.resultsContainer).hide().addClass(this.options.resultsClass);
} else {
/**
* Create DOM element to hold results, and force absolute position
*/
this.dom.$results = $('<div></div>').hide().addClass(this.options.resultsClass).css({
position: 'absolute'
});
$('body').append(this.dom.$results);
}

/**
* Attach keyboard monitoring to $elem
Expand Down Expand Up @@ -810,9 +818,11 @@
}
}

// Always recalculate position before showing since window size or
// input element location may have changed.
this.position();
if (this.options.autoPosition) {
// Recalculate position before showing since window size or
// input element location may have changed.
this.position();
}

this.dom.$results.html($ul).show();
if (this.options.autoWidth) {
Expand Down