问题
i am using the jquery ui autocomplete widget inside the jquery ui dialog. when i type in the search text, the textbox indents (ui-autocomplet-loading) but does not show any suggestions.
var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
$("#company").autocomplete({
source : availableTags ,
minLength: 2
});
company is the id of the textbox to attach the autocomplete.
i thought it might be a z index so i set this:
.ui-autocomplete, .ui-menu, .ui-menu-item { z-index: 1006; }
but it still does not show. i put the autocomplete in a 'regular' page and it works fine.
i am using jquery ui version 1.8.2. any ideas of where to look?
回答1:
I came across this answer when searching for this same issue, however none of the solutions were exactly what I wanted.
Using appendTo worked, sorta... The autocomplete items showed up where they were supposed to, however it completely threw my dialog window into a garbled mess of improperly repositioned div elements.
So in my own css file, I created the following:
ul.ui-autocomplete {
z-index: 1100;
}
I'm sure 1100 is a little overkill, but I just wanted to play it safe. It works well and conforms with the K.I.S.S. method.
I'm using jQuery 1.9.2 with jQueryUI 1.10.2.
回答2:
When using jQuery UI 1.10, you should not mess around with z-indexes (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). The appendTo option works, but will limit the display to the height of the dialog.
To fix it: make sure the autocomplete element is in the correct DOM order with: autocomplete.insertAfter(dialog.parent())
Example
var autoComplete,
dlg = $("#copy_dialog"),
input = $(".title", dlg);
// initialize autocomplete
input.autocomplete({
...
});
// get reference to autocomplete element
autoComplete = input.autocomplete("widget");
// init the dialog containing the input field
dlg.dialog({
...
});
// move the autocomplete element after the dialog in the DOM
autoComplete.insertAfter(dlg.parent());
Update for z-index problem after dialog click
The z-index of the autocomplete seems to change after a click on the dialog (as reported by MatteoC). The workaround below seems to fix this:
See fiddle: https://jsfiddle.net/sv9L7cnr/
// initialize autocomplete
input.autocomplete({
source: ...,
open: function () {
autoComplete.zIndex(dlg.zIndex()+1);
}
});
回答3:
for one or multiples autocompletes in the same dialogbox:
// init the dialog containing the input field
$("#dialog").dialog({
...
});
// initialize autocomplete
$('.autocomplete').autocomplete({
source: availableTags,
minLength: 2
}).each(function() {
$(this).autocomplete("widget").insertAfter($("#dialog").parent());
});
回答4:
I solved it in bootbox like this:
$( "#company" ).autocomplete({
source : availableTags ,
appendTo: "#exportOrder"
});
You only have to append the result list to your form.
回答5:
I solved adding atribute z-index:1500 to my divs in
jquery.autocomplete.css because Jquery UI Dialog put z-index between
1000 and 1005
ul.auto-complete-list {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 1500;
max-height: 250px;
overflow: auto;
}
回答6:
$("#company").autocomplete({
source : availableTags ,
appendTo : $('#divName')
minLength: 2
});
Note: $('#divName') divName will be the name of modal body.
EXAMPLE:
<form id="exportOrder">
<div class="input-group">
<input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
</div>
</div>
</form>
self.AttachAutoComplete = function () {
$('#accountReferenceSearch').focus(function () {
$('#accountReferenceSearch').autocomplete({
source: function (request, response) {},
minLength: 2,
delay: 300,
appendTo: $("#exportOrder")
});
});
}
回答7:
In your autocomplete implementation, add appendTo: "#search_modal", where search_modal is ID of your modal.
回答8:
I recently had the same issue. Adding this to my css-file solved it for me:
.ui-autocomplete-input, .ui-menu, .ui-menu-item { z-index: 2006; }
I first tried your initial z-index value of 1006, but that didn't work. Increasing the value worked for me.
回答9:
I was experiencing the same problem, when it occurred to me:
Always declare your dialog BEFORE setting autocomplete.
I’ve switched them around, et voilà!
Autocomplete configure itself around the INPUT you target. Dialog creates new markup and CSS around the container you target. My choices where appearing behind the dialog, or off screen.
回答10:
In my case adding styles in css doesn't work, but after adding zIndex property exactly to jQuery ui element constructor, it works like a charm.
回答11:
Add the following method to your javascript and call it from the onload event of the body element:
//initialization
function init(){
var autoSuggestion = document.getElementsByClassName('ui-autocomplete');
if(autoSuggestion.length > 0){
autoSuggestion[0].style.zIndex = 1051;
}
}
It works for me :) I got this by looking at the computed style of the modal dialog to see what it's z-index was. So all the function does is grab the auto suggestion box that's created by jquery (by one of it's class names which may be different for you but the idea is still the same) and modify it's css to include a z-index 1 point higher than the z-index of the modal (which was 1050)
回答12:
This did the trick for me:
ul.ui-front {
z-index: 1100;
}
回答13:
I had this problem also. I am working in UserFrosting which has bootstrap and select2, but doesn't have jquery-ui in the core. My autocomplete was inside a modal popup where the script tag and $(document).ready are after the html for the modal form. After chasing all kinds of nonexistent conflicts and trying to make select2 (v 4) into a combobox, I went back to the css hack and this worked:
.ui-autocomplete {z-index: 1061 !important;}
My environment is
- UserFrosting with jquery 1-11.2
- bootstrap-3.3.2,
- bootstrap-modal
- select2 v3.5.1
- jquery-ui-1.11.4 (dot-luv theme)
回答14:
Johann-S ' answer here worked for me.
simply add data-focus="false" to the button or link calling the modal like
<button type="button" class="btn btn-primary"
data-toggle="modal"
data-focus="false"
data-target=".bd-example-modal-sm">Small modal</button>
This way you don't have to mess with z-indexes or override bootstrap's enforce focus (it's not called)
回答15:
I got the same issue, but after some struggle, I use Firefox to find solution.
In chrome when any autocomplete view is opened and you want to inspect the element, that will be disappear, when you click on any component.
but
In Firefox, that will be displayed continuously so we can find the view at all.
and I did the same thing with that, and I found a class which is having z-index
z-index: 1000
so I just changed this to more like
.pac-container{
z-index: 999999;
}
might be this z-index solution will not work for you all, but I am sure the feature of Firefox will definitely help you to find the best solution.
回答16:
Try This:-
my_modal : modal id
Use appendTo property of autocomplete
$("#input_box_id").autocomplete({<br>
source:sourceArray/link,<br>
appendTo :"#<i>my_modal</i>"<br>
});
reference: https://stackoverflow.com/a/22343584/5803974
回答17:
We had the same issue. We just updated our css so that z-index is high enough and cannot be overwritten:
.dropdown-menu {
z-index: 9999 !important;
}
As append to body makes the dropdown child of $window you need to make all dropdown-menu to the new z-index.
来源：https://stackoverflow.com/questions/3217134/jquery-ui-autocomplete-inside-a-modal-ui-dialog-suggestions-not-showing