The SharePoint Designer

Brand. Design. Amaze.

Jan 4

JQuery AutoComplete, Google Location AutoComplete and SharePoint 2013

No Gravatar

In a recent project I came up again the chaos that is the JQuery AutoComplete widget, and additionally the Google Search Location Auto Complete drop down list.

When you do the append with normal html – its stays happily connected to its container div. In SharePoint 2013, it appends itself to the body tag, which ends with a floating div anchored with absolutely positioning.

So it does this when you scroll

Broken AutoComplete Widget

Broken Autocomplete Widget

Instead of this

fixed

Working Autocomplete Widget

The fix is to use appendTo(). Here is the link to the documentation:  Autocomplete Widget

This is easy enough to conquer when you control the code. I fixed this in my combobox.js by simply changing the append() to the appendTo()

this.input = $("<input>") .appendTo(this.wrapper) .val(value) .attr("title", "") .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ appendTo: (this.wrapper), delay: 0, minLength: 0, source: $.proxy(this, "_source") })

But when you come up against generated code like the Google API’s, you come stuck. And no Google hasn’t updated as far as I can see:  GMAPS API Issues – # 8605

After a long search, trial and error, replacing code on load, removing aswell and the use of very colourful language I came across a brilliant stack overflow post: Google places autocomplete not working in Windows mobile IE Browser

The answer provided by Raacer blended itself to my needs – Windows Mobile vs SharePoint 2013 you ask – hell I was trying everything. the pac-container div was appended to the form tag within the SharePoint page, and nothing was going to convince it otherwise.

By inserting the below code, fixing it to my variables, and getting the interval timing right, It worked!

 
// Fix autocomplete position in Windows Phone 8.1. Also see CSS rules.
// Wait until the autocomplete element is added to the document.
var fixEutocompleteInterval = window.setInterval(function(){
var $container = $('body > .pac-container');
if ($container.length == 0) return;
// Move the autocomplete element just below the input.
$container.appendTo($('#name').parent());
// The fix is finished, stop working.
window.clearInterval(fixEutocompleteInterval);
}, 500);
// Fix autocomplete selection in Windows Phone 8.1.
window.setInterval(function(){
// A workaround for missing property that was deprecated.
$.browser = {msie: (/msie|trident/i).test(navigator.userAgent)};
$items = $('.pac-container .pac-item').not('.tracking');
$items.addClass('tracking'); // Add event listener once only.
$items.mousedown(function(e){
// Get the text selected item.
var $item = $(this);
var $query = $item.find('.pac-item-query');
var text = $query.text() + ', ' + $query.next().text();
// Let this event to finish before we continue tricking.
setTimeout(function(){
// Check if Autocomplete works as expected and exit if so.
if ($address.val() == text) { console.log('exit'); return }
$address.trigger("focus");
// Press key down until the clicked item is selected.
var interval = setInterval(function(){
$address.simulate("keydown", { keyCode: 40 });
// If selected item is not that clicked one then continue;
var $query = $('.pac-container .pac-item-selected .pac-item-query:first ');
if (text != $query.text() + ', ' + $query.next().text()) return;
// Found the clicked item, choice it and finish;
$address.simulate("keydown", { keyCode: 13 });
$address.blur();
clearInterval(interval);
}, 1)
}, 1)
});
}, 500);

The CSS that was needed:

 // Fixes Google Maps Autocomplete position. Also see the JS code.
#address_container { position: relative;}
.pac-container { position: absolute !important; top: 34px !important; left: 1px !important;}

 

Tags: ,

Leave a comment

The SharePoint Designer is using WP-Gravatar