Moving autocomplete search results div (ac_results) into search block wrapper

[Masteries]

Currently, the Ajax/jQuery search results div in blocksearch module has the document body as its parent element. I'd like to move it inside the search wrapper instead which is "#search_block_top". (Screenshot of what I mean: https://prnt.sc/gew6cu ). 

 

The script responsible for doing this is prestashop/js/jquery/plugins/autocomplete/jquery.autocomplete.js. The line is at 551, in the function: 

$.Autocompleter.Select = function (options, input, select, config) 

Within that function is another function called init(), which is the one that assigns "ac_results" into the document body:

 

function init() {
if (!needsInit)
return;
element = $("<div/>")
.hide()
.addClass(options.resultsClass)
.css("position", "absolute")
.appendTo(document.body);

This is not the perfect place for ac_results to be because the positioning can get quite messed up (for example) when the user scrolls while having ac_results open. Or when the user has scrolled in the page and uses the search.

 

Demonstration:

 

http://prntscr.com/gewcpu

 

So I came up with a solution. I wasn't sure if core JS files could be overridden so I made some changes to the original file instead:

.css("position", "fixed")
.appendTo('#search_block_top');

Also this change at line 703 in the same .js file:

top: offset.top + input.offsetHeight,

to:

top: '80px', //the px value depends on the height of your header/menu, 80px was perfect for mine

This worked beautifully, the ac_results div stayed put/followed when scrolling. However, I noticed that in BO, some features that require jquery.autocomplete.js started generating an error (for example, when editing a product and you want to add an accessory, it was not possible to search a product). The error is generated because there is no div called #search_block_top in BO and the "top: '80px'" line I added is also not enough in BO. 

 

So, I tried another solution. I copied the following functions from jquery.autocomplete.js:

$.Autocompleter.Select = function (options, input, select, config) {

$.Autocompleter.defaults = {

And added them to modules/blocksearch/blocksearch.js instead. I undid the changes in the core .js file and instead made the changes in blocksearch.js where I copied over those functions. This worked (in BO and front).

 

However, I'm now wondering if they might conflict with each other or generate other errors in some places I haven't seen yet. Is there a more simple solution to what I'm trying to achieve?

Edited August 31, 2017 by Masteries (see edit history)

[NemoPS]

Hmm if you update the module changes will be lost, the theme's folder might be a better pick (themes/themename/blocksearch etc...)

[Masteries]

Hmm if you update the module changes will be lost, the theme's folder might be a better pick (themes/themename/blocksearch etc...)

Oh right. But I presume the functions I copied over from jquery.autocomplete.js won't conflict with each other then?

[metalines]

Hello Masteries,

 

Thanks so much for posting this to the forum, i need to move mine aswell as it doesnt like the screen being resizes very much as it is. 

I have copied the two functions into the module js file but it reports an error of cannot set properties of underfined (setting 'SELECT' at the beginning of the $.Autocompleter.Select = function.

 

I was wondering if you could post your final solution to clarify how you did it please, im assuming i am missing an important step here lol.

 

Thanks

 

Mike

Edited March 10, 2022 by metalines (see edit history)