From 8660b7adde1b0b75517009a5161401dbe29f6f57 Mon Sep 17 00:00:00 2001
From: Ere Maijala <ere.maijala@helsinki.fi>
Date: Mon, 7 Dec 2015 16:33:35 +0200
Subject: [PATCH] Switched to trigger() for the selection event so that it can
be bound to with the bind() function and the initialization function doesn't
need to be modified. Moved the autocomplete window to the form so that the
bounding rect is not needed thus avoiding positioning problems e.g. when
window is scrolled while suggestions are loading. Align suggestions when
window is resized. Set the initial content with .html(). Use the greater of
input width and form width for the maximum autocomplete list width instead of
the arbitrary * 2 width.
---
themes/bootstrap3/js/autocomplete.js | 21 +++++++++++----------
1 file changed, 11 insertions(+), 10 deletions(-)
diff --git a/themes/bootstrap3/js/autocomplete.js b/themes/bootstrap3/js/autocomplete.js
index 996e0217cdb..547bff092e7 100644
--- a/themes/bootstrap3/js/autocomplete.js
+++ b/themes/bootstrap3/js/autocomplete.js
@@ -18,9 +18,7 @@
function populate(value, input, eventType) {
input.val(value);
hide();
- if (typeof options.onselection !== 'undefined') {
- options.onselection(value, input, eventType);
- }
+ input.trigger('autocomplete:select', {value: value, eventType: eventType});
}
function createList(data, input) {
@@ -96,13 +94,13 @@
}
function align(input, element) {
- var offset = input[0].getBoundingClientRect();
+ var position = input.position();
element.css({
position: 'absolute',
- top: offset.top + offset.height,
- left: offset.left,
- maxWidth: offset.width * 2,
- minWidth: offset.width,
+ top: position.top + input.outerHeight(),
+ left: position.left,
+ minWidth: input.width() / 2,
+ maxWidth: Math.max(input.width(), input.closest('form').width()),
zIndex: 50
});
}
@@ -111,9 +109,12 @@
if (typeof element === 'undefined') {
element = $('<div/>')
.addClass('autocomplete-results hidden')
- .text('<i class="item loading">'+options.loadingString+'</i>');
+ .html('<i class="item loading">'+options.loadingString+'</i>');
align(input, element);
- $('body').append(element);
+ input.closest('form').append(element);
+ $(window).resize(function() {
+ align(input, element);
+ });
}
input.data('selected', -1);
--
GitLab