agerix/jQuery-Autocomplete
2
0
Fork 0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2025-03-14 21:42:21 +00:00
Code Issues Releases Activity

Implement appendTo option.

Browse Source
This commit is contained in:
Tomas Kirda 2013-01-20 15:17:04 -06:00
parent 067fda3a39
commit e97ad17209
4 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo.htm
View File

@ -21,6 +21,13 @@
<input type="text" name="country" id="autocomplete"/>
</div>
<div id="selection"></div>
<h2>Custom Lookup Container</h2>
<p>Type country name in english:</p>
<div>
<input type="text" name="country" id="autocomplete-custom-append" style="float: left;"/>
<div id="suggestions-container" style="position: relative; float: left; width: 400px; margin: 10px;"></div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>

1
readme.md
View File

@ -36,6 +36,7 @@ The standard jquery.autocomplete.js file is around 2.7KB when minified via Closu
* `paramName`: Default `query`. The name of the request parameter that contains the query.
* `transformResult`: `function(response) {}` called after the result of the query is ready. Converts the result into response.suggestions format.
* `autoSelectFirst`: if set to `true`, first item will be selected when showing suggestions. Default value `false`.
* `appendTo`: container where suggestions will be appended. Default value `body`. Can be jQuery object, selector or html element. Make sure to set `position: absolute` or `position: relative` for that element.
##Usage
Html:

6
scripts/demo.js
View File

@ -48,6 +48,12 @@ $(function () {
}
});
// Initialize autocomplete with custom appendTo:
$('#autocomplete-custom-append').autocomplete({
lookup: countriesArray,
appendTo: '#suggestions-container'
});
});
});

30
src/jquery.autocomplete.js
View File

@ -72,6 +72,7 @@
that = this,
defaults = {
autoSelectFirst: false,
appendTo: 'body',
serviceUrl: null,
lookup: null,
onSelect: null,
@ -112,7 +113,7 @@
that.ignoreValueChange = false;
that.isLocal = false;
that.suggestionsContainer = null;
that.options = defaults;
that.options = $.extend({}, defaults, options);
that.classes = {
selected: 'autocomplete-selected',
suggestion: 'autocomplete-suggestion'
@ -142,6 +143,7 @@
var that = this,
suggestionSelector = '.' + that.classes.suggestion,
selected = that.classes.selected,
options = that.options,
container;
// Remove autocomplete attribute to prevent native suggestions:
@ -155,15 +157,16 @@
};
// Determine suggestions width:
if (!that.options.width || that.options.width === 'auto') {
that.options.width = that.el.outerWidth();
if (!options.width || options.width === 'auto') {
options.width = that.el.outerWidth();
}
that.suggestionsContainer = Autocomplete.utils.createNode('<div class="' + that.options.containerClass + '" style="position: absolute; display: none;"></div>');
that.suggestionsContainer = Autocomplete.utils.createNode('<div class="' + options.containerClass + '" style="position: absolute; display: none;"></div>');
container = $(that.suggestionsContainer);
container.appendTo('body').width(that.options.width);
console.log(options.appendTo);
container.appendTo(options.appendTo).width(options.width);
// Listen for mouse over event on suggestions list:
container.on('mouseover', suggestionSelector, function () {
@ -171,7 +174,7 @@
});
// Deselect active element when mouse leaves suggestions container:
container.on('mouseout', function() {
container.on('mouseout', function () {
that.selectedIndex = -1;
container.children('.' + selected).removeClass(selected);
});
@ -233,9 +236,18 @@
},
fixPosition: function () {
var offset = this.el.offset();
$(this.suggestionsContainer).css({
top: (offset.top + this.el.outerHeight()) + 'px',
var that = this,
offset;
// Don't adjsut position if custom container has been specified:
if (that.options.appendTo !== 'body') {
return;
}
offset = that.el.offset();
$(that.suggestionsContainer).css({
top: (offset.top + that.el.outerHeight()) + 'px',
left: offset.left + 'px'
});
},