From c1d9069a4adc73678357b626c13979d9aecb8684 Mon Sep 17 00:00:00 2001 From: Leo Hochberg Date: Tue, 13 Jan 2015 15:40:07 -0800 Subject: [PATCH 1/3] simplified creation of the suggestion container and got rid of createNode() method that's only used once. --- src/jquery.autocomplete.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/jquery.autocomplete.js b/src/jquery.autocomplete.js index e1d96221..83b44669 100644 --- a/src/jquery.autocomplete.js +++ b/src/jquery.autocomplete.js @@ -30,13 +30,6 @@ return { escapeRegExChars: function (value) { return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); - }, - createNode: function (containerClass) { - var div = document.createElement('div'); - div.className = containerClass; - div.style.position = 'absolute'; - div.style.display = 'none'; - return div; } }; }()), @@ -157,11 +150,10 @@ that.noSuggestionsContainer = $('
') .html(this.options.noSuggestionNotice).get(0); - that.suggestionsContainer = Autocomplete.utils.createNode(options.containerClass); - - container = $(that.suggestionsContainer); - - container.appendTo(options.appendTo); + container = that.suggestionsContainer = $('
') + .addClass(options.containerClass) + .css({position: 'absolute', display: 'none'}) + .appendTo(options.appendTo); // Only set width if it was provided: if (options.width !== 'auto') { From 63915614a4584d564ad23c4837a2795b8f647c54 Mon Sep 17 00:00:00 2001 From: Leo Hochberg Date: Tue, 13 Jan 2015 15:41:33 -0800 Subject: [PATCH 2/3] this.suggestionsContainer is now a jQuery object, so we can use it directly --- src/jquery.autocomplete.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/jquery.autocomplete.js b/src/jquery.autocomplete.js index 83b44669..e26158f4 100644 --- a/src/jquery.autocomplete.js +++ b/src/jquery.autocomplete.js @@ -219,7 +219,7 @@ options.orientation = that.validateOrientation(options.orientation, 'bottom'); // Adjust height, width and z-index: - $(that.suggestionsContainer).css({ + that.suggestionsContainer.css({ 'max-height': options.maxHeight + 'px', 'width': options.width + 'px', 'z-index': options.zIndex @@ -255,7 +255,7 @@ // Use only when container has already its content var that = this, - $container = $(that.suggestionsContainer), + $container = that.suggestionsContainer, containerParent = $container.parent().get(0); // Fix position automatically when appended to body. // In other cases force parameter must be given. @@ -608,7 +608,7 @@ that.visible = false; that.selectedIndex = -1; clearInterval(that.onChangeInterval); - $(that.suggestionsContainer).hide(); + that.suggestionsContainer.hide(); that.signalHint(null); }, @@ -629,7 +629,7 @@ value = that.getQuery(that.currentValue), className = that.classes.suggestion, classSelected = that.classes.selected, - container = $(that.suggestionsContainer), + container = that.suggestionsContainer, noSuggestionsContainer = $(that.noSuggestionsContainer), beforeRender = options.beforeRender, html = '', @@ -689,7 +689,7 @@ noSuggestions: function() { var that = this, - container = $(that.suggestionsContainer), + container = that.suggestionsContainer, noSuggestionsContainer = $(that.noSuggestionsContainer); this.adjustContainerWidth(); @@ -710,7 +710,7 @@ var that = this, options = that.options, width, - container = $(that.suggestionsContainer); + container = that.suggestionsContainer; // If width is auto, adjust width before displaying suggestions, // because if instance was created before input had width, it will be zero. @@ -803,7 +803,7 @@ var that = this, activeItem, selected = that.classes.selected, - container = $(that.suggestionsContainer), + container = that.suggestionsContainer, children = container.find('.' + that.classes.suggestion); container.find('.' + selected).removeClass(selected); @@ -840,7 +840,7 @@ } if (that.selectedIndex === 0) { - $(that.suggestionsContainer).children().first().removeClass(that.classes.selected); + that.suggestionsContainer.children().first().removeClass(that.classes.selected); that.selectedIndex = -1; that.el.val(that.currentValue); that.findBestHint(); @@ -874,13 +874,13 @@ heightDelta = $(activeItem).outerHeight(); offsetTop = activeItem.offsetTop; - upperBound = $(that.suggestionsContainer).scrollTop(); + upperBound = that.suggestionsContainer.scrollTop(); lowerBound = upperBound + that.options.maxHeight - heightDelta; if (offsetTop < upperBound) { - $(that.suggestionsContainer).scrollTop(offsetTop); + that.suggestionsContainer.scrollTop(offsetTop); } else if (offsetTop > lowerBound) { - $(that.suggestionsContainer).scrollTop(offsetTop - that.options.maxHeight + heightDelta); + that.suggestionsContainer.scrollTop(offsetTop - that.options.maxHeight + heightDelta); } if (!that.options.preserveInput) { @@ -934,7 +934,7 @@ that.el.off('.autocomplete').removeData('autocomplete'); that.disableKillerFn(); $(window).off('resize.autocomplete', that.fixPositionCapture); - $(that.suggestionsContainer).remove(); + that.suggestionsContainer.remove(); } }; From 72b289fe7f84e426100b8b7c796dbc31d9be7e2a Mon Sep 17 00:00:00 2001 From: Leo Hochberg Date: Tue, 13 Jan 2015 15:51:12 -0800 Subject: [PATCH 3/3] combined multiple foo.on() lines to simplify listener attachment --- src/jquery.autocomplete.js | 44 ++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/jquery.autocomplete.js b/src/jquery.autocomplete.js index e26158f4..b9d0f441 100644 --- a/src/jquery.autocomplete.js +++ b/src/jquery.autocomplete.js @@ -160,21 +160,21 @@ container.width(options.width); } - // Listen for mouse over event on suggestions list: - container.on('mouseover.autocomplete', suggestionSelector, function () { - that.activate($(this).data('index')); - }); - - // Deselect active element when mouse leaves suggestions container: - container.on('mouseout.autocomplete', function () { - that.selectedIndex = -1; - container.children('.' + selected).removeClass(selected); - }); - - // Listen for click event on suggestions list: - container.on('click.autocomplete', suggestionSelector, function () { - that.select($(this).data('index')); - }); + // Add listeners to suggestion list + container + // Listen for mouse over event on suggestions list: + .on('mouseover.autocomplete', suggestionSelector, function () { + that.activate($(this).data('index')); + }) + // Deselect active element when mouse leaves suggestions container: + .on('mouseout.autocomplete', function () { + that.selectedIndex = -1; + container.children('.' + selected).removeClass(selected); + }) + // Listen for click event on suggestions list: + .on('click.autocomplete', suggestionSelector, function () { + that.select($(this).data('index')); + }); that.fixPositionCapture = function () { if (that.visible) { @@ -184,12 +184,14 @@ $(window).on('resize.autocomplete', that.fixPositionCapture); - that.el.on('keydown.autocomplete', function (e) { that.onKeyPress(e); }); - that.el.on('keyup.autocomplete', function (e) { that.onKeyUp(e); }); - that.el.on('blur.autocomplete', function () { that.onBlur(); }); - that.el.on('focus.autocomplete', function () { that.onFocus(); }); - that.el.on('change.autocomplete', function (e) { that.onKeyUp(e); }); - that.el.on('input.autocomplete', function (e) { that.onKeyUp(e); }); + // Add listeners to input field + that.el + .on('keydown.autocomplete', function (e) { that.onKeyPress(e); }) + .on('keyup.autocomplete', function (e) { that.onKeyUp(e); }) + .on('blur.autocomplete', function () { that.onBlur(); }) + .on('focus.autocomplete', function () { that.onFocus(); }) + .on('change.autocomplete', function (e) { that.onKeyUp(e); }) + .on('input.autocomplete', function (e) { that.onKeyUp(e); }); }, onFocus: function () {