agerix/jQuery-Autocomplete
2
0
Fork 0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-11-22 12:55:12 +00:00
Code Issues Releases Activity

Preserve original width option. Adjust width of the suggestions container each time if width is set to 'auto'.

Browse Source
This commit is contained in:
Tomas Kirda 2013-04-26 14:49:41 -05:00
parent 3512a4aaec
commit 7c2121a598
5 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo.htm
View File

@ -30,6 +30,14 @@
</div>
</div>
<div style="width: 50%; margin: 0 auto; clear: both;">
<h2>Dynamic Width</h2>
<p>Type country name in english:</p>
<div>
<input type="text" name="country" id="autocomplete-dynamic" style="width: 100%; border-width: 5px;"/>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mockjax.js"></script>
<script type="text/javascript" src="src/jquery.autocomplete.js"></script>

5
scripts/demo.js
View File

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

19
spec/autocompleteBehavior.js
View File

@ -132,7 +132,7 @@ describe('Autocomplete', function () {
});
});
it('Should execute onSearchCompleted', function () {
it('Should execute onSearchComplete', function () {
var input = document.createElement('input'),
completeQuery,
ajaxExecuted = false,
@ -421,4 +421,21 @@ describe('Autocomplete', function () {
expect(data).toBeFalsy();
});
});
it('Should set width to be greater than zero', function () {
var input = $(document.createElement('input')),
instance,
width;
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'B' }]
});
input.val('Jam');
instance = input.autocomplete();
instance.onValueChange();
width = $(instance.suggestionsContainer).width();
expect(width).toBeGreaterThan(0);
});
});

3
spec/runner.html
View File

@ -10,6 +10,9 @@
<!-- jQuery -->
<script src="../scripts/jquery-1.8.2.min.js"></script>
<script src="../scripts/jquery.mockjax.js"></script>
<script type="text/javascript">
window.JSON || document.write('<scr' + 'ipt src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.min.js"><\/scr' + 'ipt>');
</script>
<!-- Autocomplete -->
<script src="../src/jquery.autocomplete.js"></script>

24
src/jquery.autocomplete.js
View File

@ -138,16 +138,16 @@
}
};
// Determine suggestions width:
if (!options.width || options.width === 'auto') {
options.width = that.el.outerWidth();
}
that.suggestionsContainer = Autocomplete.utils.createNode('<div class="' + options.containerClass + '" style="position: absolute; display: none;"></div>');
container = $(that.suggestionsContainer);
container.appendTo(options.appendTo).width(options.width);
container.appendTo(options.appendTo);
// Only set width if it was provided:
if (options.width !== 'auto') {
container.width(options.width);
}
// Listen for mouse over event on suggestions list:
container.on('mouseover.autocomplete', suggestionSelector, function () {
@ -441,13 +441,23 @@
className = that.classes.suggestion,
classSelected = that.classes.selected,
container = $(that.suggestionsContainer),
html = '';
html = '',
width;
// Build suggestions inner HTML:
$.each(that.suggestions, function (i, suggestion) {
html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value) + '</div>';
});
// If width is auto, adjust width before displaying suggestions,
// because if instance was created before input had width, it will be zero.
// Also it adjusts if input width has changed.
// -2px to account for suggestions border.
if (that.options.width === 'auto') {
width = that.el.outerWidth() - 2;
container.width(width > 0 ? width : 300);
}
container.html(html).show();
that.visible = true;