javascript - Google Map Places Auto-complete blocked by jQuery Mobile popup -

Seeing this image is so easy to see what I mean:

I'm trying to go The user input works as an autocomplete JS function this way using Google Maps.

This works, but the autocomplete text field, blocked by jQuery's mobile popup, just like the picture.

Look at the HTML like this:

  & lt; Li & gt; & Lt; A href = "# popup location" data-relay = "popup" data-position-to- = "window" class = "ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" Data-transition = "pop" & gt; & Lt; H3 & gt; Location & lt; / H3 & gt; & Lt; P id = "Location Selection Selection" & gt; London, UK & lt; / P & gt; & Lt; / A & gt; & Lt; Div data-role = "popup" id = "popup location" data-theme = "A" square = "u-corner-all" & gt; & Lt; Div style = "padding: 10px 20px;" & Gt; & Lt; H3 style = "margin-top: 0 pixels; margin-bottom: 0 pixels;" & Gt; Location & lt; / H3 & gt; & Lt; Hour & gt; & Lt; Table width = "100%" & gt; & Lt; TR & gt; & Lt; Input id = "locationSelectionInput" onFocus = "geolocate ()" type = "text" name = "location" value = "" placeholder = "enter location" data-theme = "one" style = "margin-top: 0px ; Margin-bottom: 0px; "& gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td width = "50%" & gt; & Lt; Button style = "margin-top: 0 pixels; margin-bottom: 0 pixels;" Onclick = "changeLocationCanceled ();" & Gt; Cancel & lt; / Button & gt; & Lt; / TD & gt; & Lt; Td width = "50%" & gt; & Lt; Button style = "margin-top: 0 pixels; margin-bottom: 0 pixels;" Onclick = "changeLocation ();" & Gt; OK & lt; / Button & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Li & gt;  

If someone tells me wrong then I would be very happy.

BTW, do not laugh at my code, this is my first JS app:

< P> It's too late for Christina I hope other people who are struggling with this problem have to help.

My solution is just the code you add to the CSS file.

  .pac-container {z-index: 9999! Important; }