CODEWITHSUNDEEP
jquery-uijquery-ui-dialogjquery-ui-autocomplete
mango
mango

Reputation:

jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

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?

Upvotes: 36

Views: 61663

Answers (19)

Dani Rodés
Dani Rodés

Reputation: 11

Insert this class ui-front into your modal-body div

<div class=”modal-body ui-front“>

Upvotes: 1

Sunil Gakhar
Sunil Gakhar

Reputation: 21

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

Upvotes: 1

farpaci
farpaci

Reputation: 39

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.

Upvotes: 3

Satish
Satish

Reputation: 726

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

Upvotes: 0

Dev Sabby
Dev Sabby

Reputation: 1427

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.

Upvotes: 0

JHRS
JHRS

Reputation: 365

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)

Upvotes: 0

Allfarid Morales Garc&#237;a
Allfarid Morales Garc&#237;a

Reputation: 1547

I solved it in bootbox like this:

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

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

Upvotes: 16

Francisco Balam
Francisco Balam

Reputation: 341

In your autocomplete implementation, add appendTo: "#search_modal", where search_modal is ID of your modal.

Upvotes: 13

TauranJanitor
TauranJanitor

Reputation: 29

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)

Upvotes: 2

Charles St-Pierre
Charles St-Pierre

Reputation: 41

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.

Upvotes: 4

Parth Patel
Parth Patel

Reputation: 3997

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

Upvotes: 8

mhu
mhu

Reputation: 18051

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

Upvotes: 15

Zeljko Kozina
Zeljko Kozina

Reputation: 149

This did the trick for me:

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

Upvotes: 0

Anders
Anders

Reputation: 2941

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.

Upvotes: 2

Jader A. Wagner
Jader A. Wagner

Reputation: 171

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

Upvotes: 7

Corey Harden
Corey Harden

Reputation: 81

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)

Upvotes: 0

user256430
user256430

Reputation: 3633

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.

Upvotes: 83

Robert Isaev
Robert Isaev

Reputation: 121

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.

Upvotes: 0

kachar
kachar

Reputation: 2548

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

Upvotes: 3

Related Questions