模态ui对话框中的jquery UI自动完成 - 建议未显示？

Question

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 az 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?

Answer 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 KISS method.

I'm using jQuery 1.9.2 with jQueryUI 1.10.2.

Answer 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);
    }
});

Answer 3

I solved it in bootbox like this:

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

You only have to append the result list to your form.

Answer 4

在您的autocomplete实现中，添加appendTo: "#search_modal" ，其中search_modal是您的模式的 ID。

Answer 5

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());
 });

Answer 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")
                        });
                    });
                }

Answer 7

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.

Answer 8

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;
}

Answer 9

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.

Answer 10

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.

Answer 11

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)

Answer 12

在我的情况下，在 css 中添加样式不起作用，但是在将zIndex属性完全添加到 jQuery ui 元素构造函数之后，它就像一个魅力。

Answer 13

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)

Answer 14

This did the trick for me:

ul.ui-front {
    z-index: 1100;
}

Answer 15

Try This:-

$("#input_box_id").autocomplete({<br> source:sourceArray/link,<br> appendTo :"#<i>my_modal</i>"<br> }); https://stackoverflow.com/a/22343584/5803974

Answer 16

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)

Answer 17

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.

Answer 18

I was facing same issue , It has been resolved by adding bellow styles :

.ui-autocomplete { position: absolute;  cursor: default;z-index:30!important;}  
.modal-dialog {pointer-events:auto !important;}